如何用css3制作立方体
CSS3制作立方体
用css3制作立方体
制作立方体的重点方法
因为是制作立方体，所以我们要给自定义大小的盒子添加3D属性
transform-style: preserve-3d;这样我们当代码执行的时候才会在我们眼前显示3D的效果，完后是添加景深，也就是目标位置距离我们眼睛间的距离，模仿实际看到的3D效果，perspective: 900px;建立同样大小的六个平面，分别用旋转加位移的方式将六个面挪动成正方体的样子。
用到的属性与属性功能
transform-style: preserve-3d;
添加3D属性
perspective: 900px;
添加景深
transition: 1s;
由于我用到了hover属性，所以添加过度时间为1s
transform: rotateY(60deg)
添加旋转属性，deg为旋转单位
transform：translate（200px）；
添加位移属性，
position：relative；
添加相对定位
position：absolute；
添加绝对定位
：hover{}
hover效果，当鼠标移入到盒子上时执行旋转和位移效果，形成立方体
用css3制作立方体步骤
- 建立一个大的盒子设置好大一点的宽高，用来装立方体，也可以不用，直接在body里制作立方体，并在大的盒子里添加3d属性和景深，并添加相对定位属性。
- 在大的盒子里建立6个相同大小的盒子，添加绝对定位属性。
- 为六个面分别添加过渡时间
- 使用hover属性，分别利用旋转和位移。属性将六个面分别移动到相应的位置。