IT兄弟連 HTML5教程 CSS3屬性特效 3D變換1

 

3D變換較2D變換多了一下的轉換屬性，3D轉換屬性及描述如表1:

表1  3D轉換屬性

 

    

3D的轉換方法如表2：

表2  3D轉換方法

 

   

 

1  transform-style

transform-style常常被用來作三維空間座標系中的圖形變換，下面咱們就來看看CSS3中設置3D變形的transform-style屬性詳解。transform-style指定嵌套元素如何在3D空間中呈現。主要有兩個屬性：flat和perserve-3d。

transform-style屬性的使用語法以下：

transform-style: flat | perserve-3d;

其中flat值爲默認值，表示全部子元素在2D平面呈現。perserve-3d表示全部子元素在3D空間中呈現。transform-style屬性須要設置在父元素中，而且高於任何嵌套的變形元素。

 

2  perspective景深

perspective景深屬性對於3D變形來講相當重要。該屬性會設置查看者的位置，並將可視內容映射到視錐上，繼而投到一個2D視平面上。若是不指定透視，則Z軸空間中的全部點將平鋪到同一個2D平面上，而且變換結果中將不存在景深的概念。其實對於perspective屬性，咱們能夠簡單的理解爲視距，用來設置用戶和元素3D空間Z平面之間的距離。而其效應由它決定，值越小，用戶和3D空間Z平面距離越近，視覺效果更使人深入；反之，值越大，用戶與3D空間Z平面距離越遠，視覺效果就不那麼深入。

perspective屬性的使用語法以下：

perspective: none | <length>;

perspective屬性包括兩個屬性：none和具備單位的長度值。其中perspective屬性的默認值爲none，表示無限的角度來看3D物體，但看上去是平面的。另外一個<length>接受一個長度單位大於0的值。並且其單位不能爲百分比值。<length>值越大，角度出現的越遠，從而建立一個至關低的強度和很是小的3D空間變化。反之，此值越小，角度出現得越近，從而建立一個高強度的角度和一個大型的3D變化。

下面經過一個小案例來加深一下對perspective的印象。代碼以下：

 

這裏有兩個div，每一個div裏包含一張圖片。每一個div都創建3D空間，讓圖片繞着Y軸旋轉45deg。不一樣的是，咱們爲第二個div設置600px的景深，第一張沒有設置。在瀏覽器中查看，運行效果如圖1：

圖1  perspective景深

 

從上圖，咱們能夠看出兩張圖的差異。在父節點沒有設置perspective的狀況下，圖片的3D旋轉效果不明顯，而在父節點設置perspective後，圖片纔有3D旋轉的效果。