3d變換基於幾個比較重要的屬性，perspective,translatez,preserve-3d;
transform-style(preserve-3d)建立3d空間
perspective視鏡
perspective-origin視鏡基點
x:left/center/right/length/%
y:top/center/bottom/length/%
transform新增函式
rotatex():如果值為正值，元素圍繞x軸順時針旋轉；反之，如果值為負值，元素圍繞x軸逆時針旋轉。
rotatey():如果值為正值，元素圍繞y軸順時針旋轉；反之，如果值為負值，元素圍繞y軸逆時針旋轉。
rotatez():rotatez()函式指定元素圍繞z軸旋轉，如果僅從視覺角度上看，rotatez()函式讓元素順時針或逆時針旋轉，並且效果和rotate()效果等同，
translatez();讓元素在z軸進行位移，當其值越大時，元素離**者越近，視覺上元素放大，反之元素縮小。
scalez(),scalez()在單獨使用時，沒有任何效果，需要配合其它的變形函式一起使用才會有效果。
transform-orign:旋轉的基準點
x:left/center/right/length/%
y:top/center/bottom/length//%
z:length
**3d位移：**css3中的3d位移主要包括translatez()和translate3d()兩個功能函式；
**3d旋****css3中的3d旋轉主要包括rotatex()、rotatey()、rotatez()和rotate3d()四個功能函式；
**3d縮放：**css3中的3d縮放主要包括scalez()和scale3d()兩個功能函式；
**3d矩陣：**css3中3d變形中和2d變形一樣也有乙個3d矩陣功能函式matrix3d()
格式：
舞台(perspective)
容器(3d, preserve-3d)
內容3d實現立方體盒子：
第一步：先布局好div的位置。
第二步：對每個平面旋轉。旋轉之前的準備工作：
給舞台加上視鏡,perspective(設為800px到1200px之間)
給容器加上3d效果;transform-style:preserve-3d;
上面和下面繞著x軸旋轉。左面和右面繞著y軸旋轉，前面在z軸上移動。旋轉時，要設定旋轉的基準點，上面以下邊為旋轉基準，旋轉90deg,下面以上邊為旋轉基點，旋轉90deg,左面以右邊為旋轉基點，旋轉90deg,右邊以左邊作為旋轉基點，旋轉90deg.然後將前面沿著z軸方向平移。
如果將視鏡加給容器，在容器旋轉時，就可以看到異常，如果不給容器加上transform-style:preserve-3d;那麼旋轉時，就只看到平面在旋轉
前後
左右上下
第三步：實現3d立方體的旋轉
給容器設定旋轉中心,我設定的是盒子的正中心進行旋轉。這樣乙個3d立方體的旋轉效果就完成了。
為了更好的展示，我們可以將每個面換成是一張。
但是這個在旋轉時，有乙個問題，不該看到的平面也會被看到：
相反，如果通過另一種方式來實現，則不會有這個問題。不修改容器的旋轉中心，通過將後面，上下左右面沿著z軸向後平移寬度的一般，然後再將前面向前移動寬度的一般，那麼旋轉中心就是盒子的中心。
如下：
在旋轉過程中，一切正常：
3D 旋轉立方體
source cube src.js var cube function this.5 function d,e,a if e if a this.1 this.1 function p j,g,b,o this.7 function this.3 function this.4 function ...
3D立方體旋轉
1 首先要知道3d,x軸，y軸，z軸的方向 如圖所示 2 要想做乙個立方體首先是做6個面 以中間為基準 中間向前面平移150px transform translatez 150px 後面也平移150px,然後旋轉 rotatey 180deg 這樣前後面就做完了。左 以中間為準逆時針針旋轉90度 ...
CSS3新增樣式2D 3D效果 立方體旋轉
transform rotate 30deg 旋轉角度 transform translate 100px,200px 順著x y軸平移的畫素 transform translatex 100px 順著x軸平移的畫素 transform translatey 100px 順著y軸平移的畫素 數值可正...