CSS3地球自轉(zhuǎn)效果是一種非常酷的效果，通過(guò)CSS3中的動(dòng)畫和變形特性，可以讓一個(gè)平面的圖片看起來(lái)像一個(gè)真實(shí)的地球在自轉(zhuǎn)。

/* CSS3代碼 */
.earth {
width: 300px;
height: 300px;
background: url('earth.jpg') no-repeat center center;
background-size: cover;
border-radius: 50%;
position: relative;
}
.earth:after {
content: "";
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle at 10px 10px, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 14px, rgba(255, 255, 255, 0.3) 15px, rgba(255, 255, 255, 0.2) 25px, rgba(255, 255, 255, 0) 26px);
animation: spin 10s linear infinite;
}
@keyframes spin {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}

上面這段CSS3代碼實(shí)現(xiàn)了一個(gè)地球自轉(zhuǎn)的效果。我們首先定義了地球的容器，設(shè)置背景圖，調(diào)整寬高和圓角屬性，然后使用::after偽元素來(lái)表示地球上的云層，使用徑向漸變來(lái)呈現(xiàn)云層的效果，同時(shí)設(shè)置這個(gè)偽元素的位置為容器的中心點(diǎn)。

接下來(lái)我們通過(guò)CSS3中的動(dòng)畫屬性來(lái)實(shí)現(xiàn)地球的自轉(zhuǎn)效果，使用@keyframes關(guān)鍵字來(lái)定義動(dòng)畫效果，設(shè)置0%表示動(dòng)畫開始時(shí)間，100%表示動(dòng)畫結(jié)束時(shí)間，然后使用rotateY()函數(shù)來(lái)實(shí)現(xiàn)地球的自轉(zhuǎn)，最后使用infinite關(guān)鍵字表示動(dòng)畫無(wú)限循環(huán)。

通過(guò)這段代碼，我們可以很容易地實(shí)現(xiàn)一個(gè)酷炫的地球自轉(zhuǎn)效果，非常適合在網(wǎng)站或移動(dòng)應(yīng)用中使用。