CSS 3D模型是一種利用CSS技術(shù)創(chuàng)建出的三維模型的方法。在過去，我們必須使用JavaScript或者Flash來制作3D特效。但是，CSS 3D模型的出現(xiàn)改變了這種使用方式，使得3D特效更容易被開發(fā)者們所掌握。

在使用CSS 3D模型的時(shí)候，我們需要用到很多CSS3的新屬性。其中一些屬性如transform，transform-style和perspective非常重要。transform用來移動(dòng)和旋轉(zhuǎn)元素。transform-style用來指定元素是平面的還是3D的對象。perspective屬性用來創(chuàng)建一個(gè)近大遠(yuǎn)小的感覺，以模擬真實(shí)的3D對象。

.box {
width: 200px;
height: 200px;
perspective: 500px;
transform-style: preserve-3d;
transform: rotateY(45deg) rotateX(45deg);
}

上面的代碼展示了一個(gè)使用CSS 3D模型的例子。在這個(gè)例子中，我們創(chuàng)建了一個(gè)200x200個(gè)像素大小的容器。perspective屬性被設(shè)置為500個(gè)像素，也就是說，距離鏡頭500像素的東西會顯示的比距離鏡頭近的東西要大。transform-style被設(shè)置為preserve-3d。這代表著.box可以被看作3D對象。我們使用transform屬性將.box繞著Y軸和X軸旋轉(zhuǎn)45度。

最終效果如下圖所示：

\
| \
|__\

如果將上面的代碼添加動(dòng)畫，就可以創(chuàng)造出更加復(fù)雜的3D模型和特效。例如，我們可以在.box上添加旋轉(zhuǎn)和縮放的動(dòng)畫：

.box:hover {
animation: spin 5s linear infinite;
transform: rotateY(45deg) rotateX(45deg) scale(1.2);
}
@keyframes spin {
from {
transform: rotateY(0deg) rotateX(0deg);
}
to {
transform: rotateY(360deg) rotateX(360deg);
}
}

上面的代碼添加在.box:hover上表示當(dāng)鼠標(biāo)懸浮在.box上時(shí)，動(dòng)畫會啟動(dòng)。動(dòng)畫被命名為spin，并且被設(shè)置為無限循環(huán)。動(dòng)畫使用了@keyframes指令來描述旋轉(zhuǎn)動(dòng)畫的過渡狀態(tài)。在這個(gè)例子中，我們旋轉(zhuǎn)0度到360度。

CSS 3D模型的應(yīng)用非常廣泛。今天，越來越多的網(wǎng)站正在使用CSS 3D模型來創(chuàng)建出奇妙的3D特效。如果你想學(xué)習(xí)如何創(chuàng)建這些特效，你應(yīng)該先掌握一些基本的CSS 3D模型技能，然后慢慢地添加動(dòng)畫和樣式來創(chuàng)造出其他令人驚嘆的效果。