用到的知識點
- 最重要的一個屬性
transform-style:flat|preserve-3d;該屬性默認值爲 flat。- 當我們指定一個容器的 transform-style 的屬性值爲 preserve-3d 時，容器的子元素便會相對父元素所在平面進行3D變換。
- 位移操作： translateX(length) 、translateY(length) 、 translateZ(length)，length可正可負，同時位移操作可簡寫爲translate(Xlength,Ylength,Zlength);
- 旋轉操作：rotateX(angle) 、rotateY(angle) 、rotateZ(angle) ，angle同樣可正可負，可簡寫爲rotate(Xangle,Yangle,Zangle);
- 透明度：可通過transparent或opacity屬性設置。
操作步驟
- 準備用一個父盒子包裹六個子盒子，如圖
- 讓子盒子絕對定位，此時我們肉眼可見的只有一個
- 爲父盒子設置如下屬性，得到如圖變換
transform-style:preserve-3d;
transform: rotateX(-33.5deg) rotateY(45deg);
-
對子元素進行位移以及旋轉變換得到正方體，爲了清晰我們爲子元素添加了透明度
-
設置border- radios它還可以變成這樣（hhhh）
-
接下來便要編寫animation動畫。此步驟請自行學習 W3C CSS動畫
源代碼
[github]源代碼(https://github.com/zyg1999/Web/blob/master/3 d rotation.html)