CSS可以非常簡單地通過transform屬性旋轉頁面元素，如何使用CSS旋轉地球呢？

/* 首先定義地球元素的樣式 */
.earth {
width: 200px;
height: 200px;
background-image: url('earth.jpg');
background-size: cover;
border-radius: 100%;
position: absolute; /* 重要：使得元素能夠繞中心旋轉 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中對齊 */
}
/* 定義動畫 */
@keyframes rotate-earth {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg); /* 旋轉一圈完畢 */
}
}
/* 啟用動畫，并設置動畫周期 */
.earth {
animation: rotate-earth 10s linear infinite;
}

以上代碼通過定義一個圓形元素并指定背景圖片實現了地球的原型表現。接下來是關鍵的旋轉動畫部分，通過定義keyframes以及animation屬性，可以將地球元素沿著其中心點旋轉360度，實現類似地球公轉的效果。

可以通過調整animation的參數，比如duration和timing function實現更加自然的旋轉效果。