CSS3的強(qiáng)大功能帶來了許多新穎的特效，其中最具代表性的便是地球效果。在頁面中使用CSS3實(shí)現(xiàn)地球旋轉(zhuǎn)的效果，不僅可以增加頁面的動(dòng)感和視覺效果，也是提升用戶體驗(yàn)的一種好方式。

/* 地球容器樣式 */
#earth-container {
position: relative; 
width: 300px;
height: 300px;
margin: 0 auto;
perspective: 800px; /* 感知深度 */
}
/* 地球樣式 */
#earth {
position: absolute; 
width: 100%; 
height: 100%; 
border-radius: 50%; 
box-shadow: inset 0 0 50px #333, 0 0 20px #fff, 
0 0 30px #fff, 0 0 40px blue, 
0 0 70px #fff, 0 0 80px blue, 
0 0 100px #fff, 0 0 150px blue; 
transform-style: preserve-3d; 
animation: rotate .8s linear infinite; /* 動(dòng)畫效果 */
}
/* 動(dòng)畫關(guān)鍵幀 */
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg); 
}
100% {
transform: rotateY(360deg) rotateX(360deg); 
}
}

首先要?jiǎng)?chuàng)建一個(gè)地球容器，使用CSS3的perspective屬性，創(chuàng)造3D效果和感知深度。容器內(nèi)必須包含一個(gè)圓球體，使用CSS3的border-radius屬性進(jìn)行設(shè)置，再使用一個(gè)盒子陰影、內(nèi)陰影和正反面的背景色構(gòu)建地球的質(zhì)感，并使用transform-style: preserve-3d屬性保留子元素的3D設(shè)置。

最后通過對圓球體使用CSS3的animation屬性，設(shè)定動(dòng)畫效果，為圓球體設(shè)置關(guān)鍵幀并設(shè)置rotateY、rotateX的角度來實(shí)現(xiàn)地球的自轉(zhuǎn)和公轉(zhuǎn)效果，最后就實(shí)現(xiàn)了一個(gè)酷炫的地球旋轉(zhuǎn)動(dòng)畫效果。