摘要：canvas畫布是乙個二維平面，如何展示出3d效果？通過將三維空間中的z軸抽取出來，將影象的點投影到與z軸垂直的平面上，在通過旋轉等變換效果，我們就能實現3d效果。
1）立方體座標系
我們以立方體的幾何中心作為原點，如圖建立座標系。
2）canvas座標系
canvas座標系主要用於顯示3維平面在瀏覽器中的投影（就像一束光照射在立方體上，在牆面出現的陰影）。三維座標系的層次在頂層，canvas座標繫在底層。
我們將y軸抽取出來之後，影象對於螢幕前的我們，主要是圍繞z軸和x軸所處平面的軸在旋轉，當我們的滑鼠移動時，移動的xy距離可以換算成旋轉的角度。立方體在空間中的旋轉，我們只需要旋轉他的8個頂點，移動後將每個面連起來，就完成了立方體的移動。
1）繞x軸移動
滑鼠向下移動時，我們將移動的距離換算為角度θ，利用旋轉矩陣，我們將頂點的向量與旋轉矩陣相乘，即可得到旋轉後的點。
2）繞z軸移動
滑鼠向下移動時，我們將移動的距離換算為角度β，繼續以上操作。
3)xoz平面上的其他軸
當滑鼠斜著移動時，我們可以將其分解為兩個方向的移動，在三維空間中也是一樣，將影象分解為先繞x軸移動θ角，在繞y軸移動β角。
這樣我們就可以獲得相應的移動公式。
當旋轉完畢之後，就需要將旋轉後的影象投影到二維平面。直接將y軸的值去掉，將x軸的值設定為canvas平面的x值，將z軸的值設定為canvas平面的-y值。
效果：
css3 js實現3D旋轉效果
用css3和js實現3d旋轉的效果，主要使用到css3 transform中的一些屬性 perspective，rotate，translate。下面主要介紹一些transform中的屬性的效果和作用 1.transform style 一般是塊級元素使用此屬性，使用了此屬性後的塊級元素會在保持3d...
iOS實現3D旋轉
最近看到了乙個3d旋轉的動畫，就想著自己去實現以下。那麼，接下來就通過這邊文章記錄以下學習過程，慢慢深入了解以下3d旋轉。一 如何旋轉 每個view都在系統的座標系中，就手機螢幕來說，左上角為 0 0 向右橫向的為x軸正方向，向下縱向的為y軸正方向，垂直於手機螢幕的方向既z軸方向。所以z軸的旋轉屬於...
css實現3D長方形，可旋轉
先上圖 實現過程 1 長方體六個面 before，after，top buttom,left,right2 每個面不同旋轉角度 before 向前移動一半width寬度，transform translatez px after 向後移動一半width寬度 y軸旋轉180度 transform tr...