CSS3确实很强大，很多高大上的动画都可以实现，这里来实现下3D立方体，效果图如下：

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。

结尾说明

这里说明上面那个translate，先来看看如果不添加这个属性是怎样的效果：

可见，所有的面都交集于立方体的中心点。由于未对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>