CSS3是一個極為強大的樣式表語言，可以實現很多酷炫的效果。其中，3D旋轉是一種讓人眼前一亮的效果，通過它可以創造出很多炫彩的3D畫面。下面，我們就來看一下CSS3如何制作一個3D旋轉地球。

/*HTML代碼*/
<div class="earth">
<div class="planet"></div>
</div>

/*CSS代碼*/
.earth {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
perspective: 800px;
}
.planet {
position: absolute;
top: 0;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
border-radius: 50%;
background: url(https://cdn.pixabay.com/photo/2012/04/11/20/26/earth-29277_960_720.png);
transform-style: preserve-3d;
animation: spin 10s linear infinite;
}
@keyframes spin {
0% { transform: rotateY(0); }
100% { transform: rotateY(360deg); }
}

首先，我們需要在HTML里建立一個父級div，我們這里命名為“earth”。接著，我們在父級div中加入一個子級div，我們這里命名為“planet”，用來做可旋轉的地球表面。在CSS中，我們將給父級div設置perspective屬性，用來增加3D效果。同時，我們還給子級div設置一系列transform屬性，用來實現旋轉效果。最后，在CSS中，我們使用@keyframes屬性，對子級div設置旋轉動畫，使地球能夠不斷的旋轉。

以上就是一個簡單的CSS3 3D旋轉地球的實現方法。我們只需要稍加修改，就可以創造出各種漂亮的3D畫面，增添網頁的視覺效果。