本週是學習h5並製作乙個相關的頁面。我最初的想法是做乙個骰子，然後還可以自己旋轉。但是很遺憾得是沒有實現，因為最開始我就直接在畫布上畫正方體，畫了好久沒成功。後來去找別人的例項，慢慢跟著學，最後做了乙個旋轉的立方體，但並不是骰子。
要用到的知識點主要是
1、perspective：透視
2、transform： rotate：旋轉 translate：平移
3、@keyframes： 實現動畫
4、canvas： 畫布
首先準備六個正方形包裹在同乙個父級容器裡面，並且將父級容器設定為：transform-style: preserve-3d。這樣接下來就可以對六個面進行3d轉換。
把六個面都設定成絕對定位，那麼就只能看到乙個藍色的正方形。
然後需要將父容器進行一定的旋轉操作：transform: rotatex(-20deg) rotatey(-20deg);轉換之後的圖形如下：
接下來就可以對各個面進行3d變換了：
調整好角度和距離，就可以看到乙個正方體了：
可以適當調整各個面的透明度以及父容器的旋轉角度，是之看起來更加有立體感。
最後就是動畫，其實動畫比較簡單，設定好其實和終止兩個位置的狀態就可以。
給立方體加上這個animation屬性
乙個週期的時間是6s,變化速度是線性（linear），並且無限迴圈（infinite）。
還可以用before 這個偽元素給每個面新增乙個徑向漸變：
到此為止，乙個旋轉的立方體是完成了的，但是並沒有用到canvas，所以我給每個面都加入了乙個canvas，用以繪製或文字，這個可以自由發揮。我選擇的是繪製文字，為了看起來不那麼單調，我用了漸變顏色筆去繪製。每個面的繪製過程都是這樣，至多換換顏色，文字。這裡需要強調的是
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度 ...
實現立方體旋轉
html部分 12 3456 css 1.3維空間圖 電腦螢幕中心為原點，橫向為x軸，縱向為y軸，人臉的方向為z軸 translate x,y translatex x translatey y translatez z translate3d x,y,z 定義位置的移動距離 rotate angl...