CSS3 3D 特效影片檔案分享

CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製作時採用層疊樣式表技術，可以有效地對頁面的佈局、字體、顏色、背景和其它效果實現更精確的控制。

CSS3是CSS技術的升級版本，CSS3語言開發是朝向模組化發展的。以前的規範作為一個模組實在是太龐大而且比較複雜，所以，把它分解為一些小的模組，更多新的模組也被加入進來。這些模組包括： 盒子模型、列表模組、超連結方式 、語言模組 、背景和邊框 、文字特效 、多欄佈局等。

《CSS3 3D 特效影片教學》是透過CSS3 當中的transition屬性、perspective屬性、transform屬性來創造真實可用的三維效果。

影片播放位址：//m.sbmmt.com/course/416.html

##本視訊學習困難

一、旋轉和傾斜的方向

　　對於旋轉和傾斜變化，最重要的便是他們的預設變換方向。

　　對於旋轉變換，其預設是沿著基準軸正方向（由使用的旋轉方法決定，如：rotateX()的基準軸就是X軸）做順時針變換。將上圖黑色邊框包圍的平面看做一個元素，以X軸作為基準軸；此時，若將元素旋轉（+）30°，即是將黑色平面固定在X軸上，將Y軸正方向的一邊往上掀起來（就像掀起一塊木板，被掀起的木板仍然在一個平面內，而不會像翻書一樣發生彎曲）。 rotateY()同理。 rotateZ()相當於2d變換的rotate()方法，就是將元素順時針轉動。

rotatex

rotatey

rotatez

　　對於傾斜變換，X軸和Y軸方向相反。 skewX()是將元素的垂直邊逆時針（也就是向左）傾斜，而skewY()是將元素的水平邊順時針（也就是向下）傾斜。

skewx

skewy

 二、變換基點、視點與視距

　　預設地，CSS3變換的基點是元素的中心點，即：進行變換（僅限旋轉、傾斜和縮放）後，元素中心點的座標不變，例如：元素初始位置與螢幕左上角重合，寬高均為100px，旋轉30°後，元素中心點座標仍然是（ 50,50）。

　　視點是另一種基點，它只用於3d變換。理解視點，可以藉助透視思想。我們應該對這局話都有印象--「兩條平行直線在無窮遠處相交」。三維空間中的直線原本不可能相交，在無窮遠處也一樣，但投射到人眼中，原本平行的直線因產生「透視」現象，會不斷相互接近，直到交於一點。

　　不過，視點並不是線的交點，上圖中的視點，其實是在平面的最外面，也就是在中間的立方體沖向屏幕外面的表面上。 CSS的視點原理相同，只不過是模擬人眼在某個位置時，能夠看到的該元素當時的樣子，也就是能夠像上圖中不同位置的立方體，在人眼位於「視點」時，會呈現不同的表面讓人看到，視點就是用來模擬這種三維的元素呈現方式的一個屬性。

　　而另外一個不得不說的屬性就是視距了。顧名思義，視距就是物體距離視點的距離。根據「透視」原理，物體會呈現近大遠小的特點，當元素足夠近而又大到足夠遮擋人眼，人就不能看到其他東西了；當元素足夠遠，那麼它將會顯示的非常小，甚至看不見。 perspective屬性需要與translateZ()方法配合“食用”，為父元素設定perspective，同時，向子元素應用translateZ()方法，即：父元素用於模擬人眼位置，子元素就是你要看的物體。未對子元素應用translateZ()方法時，相當於translateZ(0)，元素顯示它原本的大小；平移的距離越接近視距（不超過），元素就呈現地越大；反之，越小；而當平移距離超過視距後，元素就消失了，相當於物體跑到了人眼後方，自然就看不見了。 perspective的工作原理是以元素設定的原本大小作為元素在視距處的大小，因此，平移(+)的距離，元素會變大；平移(-)的距離，元素就能變小，但必須是設定了視距的情況才有效。

　　此外，如上方透視圖中所示，不同位置的物體會呈現不同的樣子。在CSS中，想要實現這樣的效果，可以為父元素設定視距，然後給多個子元素套用變換。

以上是CSS3 3D 特效影片檔案分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！