如果你想讓你的網(wǎng)頁(yè)出現(xiàn)3D效果，那么立體旋轉(zhuǎn)是一個(gè)非常酷的技巧。幸運(yùn)的是，你可以使用 CSS 使你的元素輕松實(shí)現(xiàn)360度的旋轉(zhuǎn)。讓我們看看如何實(shí)現(xiàn)這一技巧。

.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);
}
}

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

嘗試在瀏覽器中運(yùn)行這些代碼片段，你會(huì)看到一個(gè)立方體在不斷地自轉(zhuǎn)。這是一個(gè)非常基本的例子，你可以使用類似的技術(shù)來創(chuàng)建更復(fù)雜的3D動(dòng)畫效果。