如果你想讓你的網頁出現3D效果，那么立體旋轉是一個非常酷的技巧。幸運的是，你可以使用 CSS 使你的元素輕松實現360度的旋轉。讓我們看看如何實現這一技巧。

.box {
width: 200px;
height: 200px;
position: relative;
perspective: 800px;
}
.box .square {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
.box .square .face {
width: 100%;
height: 100%;
position: absolute;
}
.box .square .face.front {
transform: translateZ(100px);
background-color: red;
}
.box .square .face.back {
transform: rotateY(180deg) translateZ(100px);
background-color: blue;
}
@keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}

如上代碼中，我們首先創建一個擁有透視效果的容器。然后在容器內部創建一個擁有設置了transform-style:preserve-3d的正方形，這告訴瀏覽器這個盒子的子元素都應用3D變換。接下來在這個元素內部創建兩個用來表示面的子元素。我們通過transform:translateZ屬性將一個面推到正方形的正面，把另一個面通過rotateY(180deg)和translateZ屬性旋轉并推到背面。最后，我們使用CSS的關鍵幀動畫來使這個正方形無限自轉360度。

嘗試在瀏覽器中運行這些代碼片段，你會看到一個立方體在不斷地自轉。這是一個非常基本的例子，你可以使用類似的技術來創建更復雜的3D動畫效果。