之前本来就做过一次，忘了记录了。最近在做抽奖程序的时候看到那个界面就又想再做一次，于是作为小白的掌柜就再次做了一个很简单的3D动画魔方。主要用到的知识点是
- 相对定位(position: relative)与绝对定位(position: absolute)
- 浮动(float: left)
- transform-style： preserve-3d
- 动画(animation)的设置
- 旋转(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动画魔方就做好了（如上图）
京公网安备 11010502036488号