3D 地球 CSS 是一種通過(guò)使用 CSS 和 HTML 來(lái)創(chuàng)建 3D 地球的技術(shù)。這項(xiàng)技術(shù)可以讓網(wǎng)站設(shè)計(jì)師和開發(fā)人員在網(wǎng)頁(yè)上展示一個(gè)漂亮的 3D 地球，以吸引用戶的目光，并增強(qiáng)網(wǎng)站的視覺效果。下面是一個(gè)使用 CSS 和 HTML 創(chuàng)建 3D 地球的代碼示例：

.earth {
position: relative;
width: 400px; height: 400px;
margin: 0 auto;
transform-style: preserve-3d;
perspective: 800px;
}
.earth__map {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 50%;
background: url('earth-map.jpg');
background-size: cover;
border: 1px solid #000;
}
.earth__globe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 50%;
background: url('earth-globe.png');
background-size: cover;
opacity: 0.5;
transform: rotateY(45deg);
animation: spin 10s linear infinite;
}
@keyframes spin {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-360deg); }
}

如上所示，這段代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的 3D 地球效果。其中 .earth__map 和 .earth__globe 分別代表地球的貼圖和球體旋轉(zhuǎn)效果。這兩個(gè)元素都使用了 CSS 的 position 屬性來(lái)定位并且背景圖片都使用了 background 屬性來(lái)進(jìn)行設(shè)置。通過(guò)設(shè)置 .earth 的 transform-style 和 perspective 屬性，實(shí)現(xiàn)了 3D 效果。整個(gè) 3D 地球也被放置在了一個(gè) div 容器中，以達(dá)到更好的效果。