花了點時間把css3d變形研究了下，做了個立方體的例項。
1. 基礎
1.1 理解座標和旋轉
參考資料：
rotatex(angle)：定義沿x軸的3d旋轉
rotatey(angle)：定義沿y軸的3d旋轉
rotatez(angle)：定義沿z軸的3d旋轉
以上三個函式，angle為旋轉角度，值為正時表示：從軸延伸方向向圓心看順時針旋轉（或者反過來理解，從圓心向軸的延伸方向看逆時針旋轉），值為負值時表示：從軸延伸方向向圓心看逆時針旋轉（或者反過來理解，從圓心向軸的延伸方向看順時針旋轉）。
舉例來說，如上圖所示，rotatex（30deg），表示繞著x軸旋轉30度，那麼具體是如何旋轉，向哪個方向旋轉呢？有個簡單的方法就是：從+x向圓心看，順時針方向旋轉30度即可。
1.2 理解translatez(z)
translatez(z)定義3d轉換，只用z軸的值，它的功能就是讓元素在自己的眼前或近或遠。z值越大則子元素離的越遠，z值越小則子元素離的越近。
2. 立方體例項
**： 前
後右左上
下為了檢視完整的變換過程，可以將css裡面的translatez（）都給去掉，然後乙個乙個除錯，就可以理解translatez具體是如何調整元素位置的。translatez(z)，z為正值表示向正前方移動，z為負值表示向後方移動。以上面**為例，我們看下right，首先圍繞y軸順時針旋轉90度，效果如下：
可以看到旋轉90度後的效果，此時沒有向正前方移動50px。注意，此處我加了背景色gold，以便清晰看的變換後的元素位置，然後我們再加上tanslatez(50px)，效果如下：
可以看到向正前方移動50px後，正好成為了立方體的右面。
left是圍繞y軸逆時針旋轉90度，然後再向正前方移動50px。具體效果可自行除錯。
3. 執行效果
第2節的**執行效果如下：
至此，簡單的立方體即完成了。理解座標，旋轉方向後再用**進行一步步除錯，即可理解3d變換，為進一步學習打下基礎。
css3製作立方體
建立6個寬高為100px的正方形，調整ul在頁面的位置，分別設定不同li裡的背景色。為了方便區分，在li裡設定數字顯示 使用絕對定位的目的是為了讓6個li分別顯示在圍成正方體所需的位置上。屬性 transform style 設定3d空間 屬性值 flat 處在2d空間 preserve 3d 處在...
CSS3製作立方體
要用css3來製作乙個正方體，我們先來看正方體的結構，如圖 1.建立結構 正方體有六個面，我們可以先建立六個面，放在li裡。設定寬高，和背景色 方便區分 效果如圖 2.位移 接下來可以通過定位 position 和位移 translate 將他們移動到圖一的位置。先用絕對定位將六塊正方形定位到第1塊...
CSS3 3D transform建立立方體
首先建立html結構 123 456 然後定義css，關鍵是透視和style container cube cube figure 定義立方體的6個面，乙個element是有正反面的，這裡都是以div中心先旋轉乙個角度，比如說back是先旋轉180度，這時這個div的z軸射向頁面裡 預設的是從頁面射...