CSS3 3D 特效視頻資料分享

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

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

《CSS3 3D 特效視頻教程》是通過CSS3 當中的transition屬性、perspective屬性、transform屬性來建立真實可用的立體效果。

視頻播放地址：http://www.php.cn/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中，想要實現這樣的效果，可以為父元素設定視距，然後給多個子項目應用變換。