現在，我們來學習如何使用CSS制作旋轉地球動畫！

/* HTML代碼 */
<div class="earth"></div>
/* CSS代碼 */
.earth{
width:200px;
height:200px;
border-radius:50%;
background-image:url('地球圖片.jpg');
background-size:cover;
animation: rotate 10s linear infinite;
transform-style:preserve-3d;
}
@keyframes rotate{
0%{
transform:rotateY(0deg) rotateX(0deg);
}
100%{
transform:rotateY(360deg) rotateX(360deg);
}
}

首先，在HTML中，我們創建了一個容器div，并為其設置了一個類名“earth”，用于將CSS代碼應用到它上面。然后，在CSS中，我們為這個div設置了寬度、高度和邊框半徑，這樣就可以創建一個像地球一樣的球體了。接著，我們使用背景圖片和background-size屬性，將圖片填充到球體上。

關鍵是掌握CSS的動畫和轉換，我們使用@keyframes關鍵字來定義動畫效果，這里我們設置了一個名為“rotate”的旋轉動畫，并在earth選擇器中應用這個動畫。在@keyframes中，我們設置了從0%到100%的旋轉度數，這里我們選擇了沿著Y軸和X軸旋轉360度。最后，我們通過transform-style屬性將元素的3D轉換設置為“保持3D”，這樣就可以讓地球旋轉的更自然了。

這樣就完成了用CSS制作旋轉地球動畫的教程了。復制粘貼這些代碼到您的項目中，你也可以創建一個令人驚嘆的3D效果地球盤旋在你的網頁上面！