如何用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制作立方体步骤

1. 建立一个大的盒子设置好大一点的宽高，用来装立方体，也可以不用，直接在body里制作立方体，并在大的盒子里添加3d属性和景深，并添加相对定位属性。
2. 在大的盒子里建立6个相同大小的盒子，添加绝对定位属性。
3. 为六个面分别添加过渡时间
4. 使用hover属性，分别利用旋转和位移。属性将六个面分别移动到相应的位置。

具体实现代码

千峰逆战2004学员完成演示效果