用到的知识点
- 最重要的一个属性
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)