CSS3D是一種新的技術，能夠讓網頁元素進行3D旋轉。這個教程將向您展示如何使用CSS3D來為您的網站創建引人注目的3D效果。

首先，在CSS文件中創建一個新的類，我們將稱之為“box”。這個類將被用于代表我們想要旋轉的元素：

.box {
width: 200px;
height: 200px;
background-color: #e0e0e0;
position: relative;
perspective: 800px; /* 這是一個關鍵點：設定透視距離，讓元素能夠在3D空間內旋轉 */
}

接下來，添加一個子元素，用于代表我們想要旋轉的對象。我們稱之為“object”：

.box .object {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
background-color: #fff; /* 為了讓元素能夠顯現出來，我們加上一些白色背景色 */
}

現在，我們已經建立了基本的框架。要旋轉這個元素，我們需要使用CSS3D的旋轉功能。添加以下代碼到“object”類中：

transform-style: preserve-3d; /* 設定轉換的樣式 */
transform: rotateY(30deg); /* 旋轉30度 */

以上代碼將使我們的“object”元素在Y軸上以30度的角度進行旋轉。如果我們想要在X軸上旋轉，可以將“rotateY”換成“rotateX”。要旋轉多個軸，可以使用“rotate3d”。

現在我們已經創建了一個基本的3D旋轉元素。您可以在“object”類中嘗試不同的旋轉值，以創建出不同的效果。祝您旅途愉快！