纯CSS3做3D动画魔方

之前本来就做过一次，忘了记录了。最近在做抽奖程序的时候看到那个界面就又想再做一次，于是作为小白的掌柜就再次做了一个很简单的3D动画魔方。主要用到的知识点是

1. 相对定位(position: relative)与绝对定位(position: absolute)
2. 浮动(float: left)
3. transform-style： preserve-3d
4. 动画(animation)的设置
5. 旋转(rotate())和位移（是Z轴的，translateZ)
   ps：如果跟掌柜一样是用无序列表的ul+li 来做里面的小方块的，记得设置ul{ margin: 0; padding: 0;} 即清除内外边距，不然里面的九个小方块会不整齐排列。

这里着重讲一下当六个面层叠在一起的时候，如何旋转跟位移的问题。有点考验大家的空间想象力在这里，不过掌柜的听了老师的讲解后，觉得很容易就理解了，大家可以试着拿出六张纸巾（其他都行，老师说的是手掌，anyway只要你能理解）重叠在一起且面对着我们的脸。

然后我们现在能看到的就是第一个面，其余五个面都隐藏在他后面了。现在我们先移动右边这个面，要想让第二个面变成魔方的右面，需要先沿着Y轴旋转90度，此时旋转后的这个面是垂直于第一个面的。所以我们还需要让这个垂直的面沿着Z轴，位移魔方宽度的一半，才能刚好到达魔方的右面。也许你会问为什么不沿着X轴位移，这个你可以试试，就知道为什么不这样做了！所以右面的代码是这样的：

.c-right {
  background-color: transparent; /*颜色透明*/ 
  transform: rotateY(90deg) translateZ(150px);
}

同理后面的左面、上面跟下面都是这样的设置。接着前面跟后面这两个面就不需要旋转，只需要一个正向沿着Z轴移动，一个负向移动就OK。到这里魔方就拼好了，但是还是2D的，所以需要我们来个动画效果就彻底完成，代码如下：

@keyframes cube {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }   
    50%{
        transform: rotateX(120deg) rotateY(60deg);
    }
    100%{
        transform: rotateX(360deg) rotateY(360deg);
    }
}

上面的角度可以自己随意设置，看你想怎么旋转。到这里简单的3D动画魔方就做好了（如上图）），这真的是个很简单的练手项目，适合像掌柜这样的小白来巩固基础知识，大神们就可以忽略。接下来小白掌柜还有其他基础项目在做，改天再接着更博！谢谢各位的浏览，实在需要看完整代码的可以去“我的资源”页面下载，再次感谢。