利用HMTL5制作一个正方体，并实现3D旋转效果

第一部分：
首先要确定HTML结构，我个人比较使用列表来做：一个ul标签内包含六个li标签，也就是正方体的六个面，然后分别给每个里标签添加class: top、bottom、left、right、before和after。
第二部分：
开始设置样式：首先将ul标签的父元素div设置到你满意的位置，接下来为了使正方体更有立体的感觉，我们先将ul进行旋转微调，同时不要忘记添加绝对定位及过渡时间。代码如下：
div ul{width:200px;height:200px;list-style: none; position:relative;transform: 3s; transform:rotateX(45deg) rotateY(45deg);}

接下来就是讲正方体的六个面位移到相应的位置：首先给li标签先设置下基本样式：
div ul li{width:200px;height:200px;position:absolute;opacity:0;}

左面：先向X轴的负方向位移100px，接着再将它沿着Y轴旋转90deg。
右面：先向X轴的正方向位移100px，接着再将它沿着Y轴旋转90deg。
上面：先向Y轴的负方向位移100px，接着再将它沿着X轴旋转90deg。
下面：先向Y轴的正方向位移100px，接着再将它沿着X轴旋转90deg。
正面：直接沿着Z轴正方向位移100px。
反面：直接沿着Z轴负方向位移100px。
这样正方体就已经初步完成了，可以设置下背景颜色，同时可以添加opacity：.5；，半透明的状态能够更清楚观察3D效果。代码如下：
div ul li.left{background:#f99;opacity:.5;transform:translateX(-100px) rotateY(90deg);}
div ul li.right{background:#99f;opacity:.5;transform:translateX(100px) rotateY(90deg);}
div ul li.top{background:#9f9;opacity:.5;transform:translateY(-100px) rotateX(90deg);}
div ul li.bottom{background:#f0f;opacity:.5;transform:translateY(100px) rotateX(90deg);}
div ul li.before{background:#ff0;opacity:.5;transform:translateZ(100px);}
div ul li.after{background:#f80;opacity:.5;transform:translateZ(-100px);}

第三部分：
最后我们来实线3D旋转效果，最简单的方法：我们可以直接选择ul的父元素div，设置：div：hover{transform：rotateY（360deg）；}，鼠标悬停时，第v沿着Y轴顺时针旋转360deg。同时记得给div添加属性：3D效果：transform-style：preserve-3d；以及过渡时间：transition：3s；

2020.2.22
逆战班