CSS3中有一個非常酷炫的效果，就是地球轉動的動畫效果。下面我們來學習一下如何實現它。

.earth {
width: 200px;
height: 200px;
border-radius: 50%;
background: url('earth.png') no-repeat center center;
background-size: cover;
position: relative;
-webkit-animation: earth-rotate 10s infinite linear;
animation: earth-rotate 10s infinite linear;
}
@-webkit-keyframes earth-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes earth-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

首先我們創建一個div，并給它一個background設置為地球圖片，然后定義一個動畫 keyframes ，rotate讓地球沿著中心點無限制的旋轉。最后通過添加 animation 屬性，將動畫添加到地球上。

以上是地球旋轉的動畫效果。我們可以通過這個非常簡單的方法，來創建許多不同的動畫效果。