CSS3是一種用于網(wǎng)站設(shè)計(jì)的語(yǔ)言，可以讓我們?cè)诰W(wǎng)站中實(shí)現(xiàn)各種有趣的效果。其中，地球3D效果是一種非常受歡迎的效果之一。

/* 先定義一個(gè)圓形的div作為地球 */
#earth {
width: 300px;
height: 300px;
border-radius: 50%;
background-image: url('earth.jpg');
background-size: cover;
perspective: 1000px;
}
/* 將div變成3D空間，產(chǎn)生3D效果 */
#earth:hover {
transform: rotateY(360deg);
}
/* 點(diǎn)擊地球，讓地球自轉(zhuǎn) */
#earth:active {
animation: rotate 10s infinite linear;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}

以上代碼就是創(chuàng)建CSS3地球3D效果的核心部分。首先，我們創(chuàng)建了一個(gè)div元素，它的大小和形狀類(lèi)似于一個(gè)圓球。然后，我們給這個(gè)div添加了一個(gè)背景圖片，用來(lái)展示地球的貼圖。

接下來(lái)，我們通過(guò)添加perspective屬性，將div轉(zhuǎn)換成了一個(gè)3D空間。當(dāng)鼠標(biāo)在div上懸停時(shí)，我們使用transform屬性將div在Y軸上旋轉(zhuǎn)了360度，從而產(chǎn)生了3D旋轉(zhuǎn)的效果。

最后，我們添加了一個(gè)動(dòng)畫(huà)，用來(lái)讓地球自轉(zhuǎn)。該動(dòng)畫(huà)使用了CSS3的關(guān)鍵幀技術(shù)，將地球從0度旋轉(zhuǎn)到360度，并在10秒鐘內(nèi)無(wú)限循環(huán)播放。

這樣，一個(gè)簡(jiǎn)單的CSS3地球3D效果就創(chuàng)建完成了。當(dāng)然，這只是一個(gè)基礎(chǔ)的效果，如果你想讓地球更具真實(shí)感，還可以添加光照、陰影等效果，讓地球看起來(lái)更加逼真。