CSS3确实很强大，很多高大上的动画都可以实现，这里来实现下3D立方体，效果图如下：
3D立方体.gif
html
其实，实现3D立方体需要的html十分简单，只需要一个ul标签里面包裹6个li标签，分别用来表示3D立方体的6个面[ 前，下，后，上，左，右 ]。具体代码如下:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
CSS3
ul
基本的宽高这些就不说了；作为整个3D立方体的父级元素，需要设置positiion属性为relative，还要最重要的是设置它的动画类型tranform-style为preserve-3d，这样就可以实现它的所有子元素都进行3d动画。
li
宽高设置为100%，position属性设置为absolute。
- 前
设置背景，并且沿着Z轴移动50px，即宽高的一半(为什么得添加这个, 后面用动画进行解释说明)。 - 下
设置背景，沿着X轴旋转-90deg，作为底面，同样，并且沿着Z轴移动50px。 - 后
设置背景，沿着X轴旋转-180deg，作为后面，同样，并且沿着Z轴移动50px。 - 上
设置背景，沿着X轴旋转90deg，作为上面，同样，并且沿着Z轴移动50px。 - 左
设置背景，沿着Y轴旋转-90deg，作为左面，同样，并且沿着Z轴移动50px。 - 右
设置背景，沿着Y轴旋转90deg，作为右面，同样，并且沿着Z轴移动50px。
效果.gif
结尾说明
这里说明上面那个translate，先来看看如果不添加这个属性是怎样的效果：
动画.gif
可见，所有的面都交集于立方体的中心点。由于未对6个面作任何动画处理的时候，所有的面都集合在一起。所以在面作旋转的同时需要对其进行Z轴的位移处理。
代码
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
ul {
list-style: none;
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
margin: 150px auto;
transition: 1s; /* 设置过渡时间 */
transform-style: preserve-3d; /* 设置所有的子元素实现3D动画 */
}
/* 设置鼠标悬停的动画 */
ul:hover {
transform: rotateX(120deg) rotateY(120deg);
}
ul li {
width: 100%;
height: 100%;
text-align: center;
line-height: 100px;
font-size: 40px;
font-weight: 700;
position: absolute;
top: 0px;
}
/* 前 */
ul li:nth-child(1) {
background-color: rgba(225, 0, 0, .4);
transform: rotateX(0deg) translateZ(50px);
}
/* 下 */
ul li:nth-child(2) {
background-color: rgba(0, 255, 0, .4);
transform: rotateX(-90deg) translateZ(50px);
}
/* 后 */
ul li:nth-child(3) {
background-color: rgba(0, 0, 255, .4);
transform: rotateX(-180deg) translateZ(50px);
}
/* 上 */
ul li:nth-child(4) {
background-color: rgba(125, 125, 0, .4);
transform: rotateX(90deg) translateZ(50px);
}
/* 左 */
ul li:nth-child(5) {
background-color: rgba(0, 125, 125, .4);
transform: rotateY(-90deg) translateZ(50px);
}
/* 右 */
ul li:nth-child(6) {
background-color: rgba(10, 45, 36, .4);
transform: rotateY(90deg) translateZ(50px);
}
</style>
