在研究slice-box.js的時候發覺自己需要3d轉換的知識，了解之後感覺還是差點。
話說還沒碰到一次web前端的面試，想當個實習生也不容易。一天又過去了啊!
相當於鏡頭與被拍攝物體之間的距離，近大遠小。
這個值能讓我們看到3d轉換，預設值是flat只能看到平面的。
左手豎直代表y軸，右手水平代表x軸，z軸是即垂直x軸也垂直y軸的平行於地面的直線。
z軸的順時針旋轉等同於時鐘秒針的順時針旋轉，我們拿食指沿著z軸負方向模仿(指向螢幕方向)，只要改變沿著座標軸方向(x軸負方向指向左面，y軸負方向指向上面)，就能體會其他兩個軸的順時針旋轉了。
(2)**前後
左右上下
六個面的方塊是重疊在一起的, 注意使用left等屬性進行移動和使用translatex等屬性進行移動有等價的時候也有不等價的時候，取決於tansform-origin屬性。
front在z軸向前移動了75px;back在z軸向後移動75px.
left，使用left屬性向左移動152px，沿著z軸向後移動75px，已transform-origin: right center 0為變換點沿y軸旋轉的90deg，right ，沿著z軸向後移動75px，使用left屬性向右移動152px，已transform-origin: left center 0為變換點沿著y軸旋轉-90deg，
top使用top屬性向上移動152px，沿著z軸向前移動75px，已transform-origin: center bottom 0;為變換點沿著x軸旋轉-90deg，bottom使用bottom屬性向下移動152px，已transform-origin: center top 0;為變換點沿著x軸方向旋轉90deg。
至此乙個立方體搭建好了。
transition:1s;這個屬性是放在六個面的父元素container上，這種思想還應用在布局與控制上，我們旋轉的是container，旋轉的變換點也在這個平面，預設是transform:center center 0px;因為構建正方體方式的原因，y軸正好位於前後的中間，左右的中間！
放在container會看到另外一種效果，我猜想是因為定位點變成container，那麼在container前面的就會放大，後面就被縮小，從而導致其他幾面的變化。可當後面旋轉到前面時，後面的大小怎麼不變換，哪位同行知道麻煩解答下
.left
.right
.top
.bottom
.front
.back
設定背景顏色後沿著x軸旋轉，旋轉到底部的會看到其他面都是底部的顏色，哪位同行知道麻煩解答下。
3d轉換 正方體 Html5Css3 遁地龍捲風
在研究slice box.js的時候發覺自己需要3d轉換的知識，了解之後感覺還是差點。話說還沒碰到一次web前端的面試，想當個實習生也不容易。一天又過去了啊 相當於鏡頭與被拍攝物體之間的距離，近大遠小。這個值能讓我們看到3d轉換，預設值是flat只能看到平面的。左手豎直代表y軸，右手水平代表x軸，z...
純CSS實現3D正方體動畫效果
目錄前言 正文1.基本架構 2.書寫每個div樣式 3.為需要產生動畫的一面單獨設定樣式 4.設定滑鼠hover效果 5.優化 總結 純css實現3d正方體動畫效果，此方法是通過transform的旋轉 rotate 和位移 translate 實現的，具體效果是滑鼠滑過時正方體的乙個面會產生位移 ...
CSS3 製作正方體
變形屬性 2d變形屬性 transform 他是css3中的變形屬性 通過transform 變形 來實現2d 或者3d 轉換,其中2d 有，縮放 scale x,y 移動 translate x,y 旋轉 rotate deg 傾斜 skew deg,deg 矩陣matrix 3d就是在2d基礎上...