最终效果如下
三阶魔方想要进行转动因为太过复杂，所以这里用的是2阶魔方。 首先要搭建一个魔方。利用6个div盒子不同的空间旋转，拼出一个小正方体。然后改变正方体的空间位置，一共8个小正方体拼成2阶魔方。最后给小正方体的每一个面上一个颜色。
下面的代码中，box为每个小正方体的公共样式，a1.a2.a3这些是用来给每个小立方体设立空间坐标，已经转动时不同的位置变化。
到这里我们的魔方就搭建好了。接下来的问题就是，怎么让魔方转动。因为每一个小正方体都是独立的个体，所以我们不能直接控制魔方的一层进行转动。也就是说魔方每转动一次，那一层的4个小正方体都有着自己独立的转动方式，我们需要给4个小正方体设置不同的动画代码，每一次转动就是4个小正方体同时进行空间的位移效果，利用动画打包装起来。最后通过所有动画的拼接，呈现出魔方打乱又自动复原的效果。
代码有点乱，看看就好，就是各种动画的拼接。 动画的代码都是这种空间的移动，就不一一列出来了。 最后再对魔方的样式和背景图稍微装饰一下，加个圆角，上个色，就成了gif图里面的效果了。
@keyframes a41{100%{transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(90deg);}}@keyframes a42{100%{transform: translateX(0px) translateZ(0px) translateY(10px) rotateX(90deg) rotateZ(90deg);}}@keyframes a43{100%{transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(90deg) rotateZ(0deg);}}@keyframes a44{100%{transform: translateX(0px) translateZ(0px) translateY(10px) rotateX(0deg);}}@keyframes a51{100%{transform: translateX(0px) translateZ(110px) translateY(-100px) rotateX(90deg);}}@keyframes a52{100%{transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(0deg);}}@keyframes a71{100%{transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(-90deg);}}@keyframes a72{100%{transform: translateX(0px) translateZ(110px) translateY(10px) rotateX(-90deg) rotateZ(-90deg);}}@keyframes a73{100%{transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(-90deg);}}@keyframes a74{100%{transform: translateX(110px) translateZ(110px) translateY(-100px) rotateX(0deg);}}@keyframes a61{100%{transform: translateX(110px) translateZ(0px) translateY(10px) rotateX(-90deg);}}@keyframes a62{100%{transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(-90deg) rotateZ(-90deg);}}@keyframes a63{100%{transform: translateX(110px) translateZ(0px) translateY(10px) rotateX(-90deg);}}@keyframes a64{100%{transform: translateX(110px) translateZ(110px) translateY(10px) rotateX(0deg);}}@keyframes a21{100%{transform: translateX(110px) translateZ(110px) translateY(-100px) rotateX(-90deg);}}@keyframes a22{100%{transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(-90deg) rotateY(0deg) rotateZ(90deg);}}@keyframes a23{100%{transform: translateX(110px) translateZ(110px) translateY(-100px) rotateX(-90deg);}}@keyframes a24{100%{transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(0deg);}}@keyframes a31{100%{transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(-90deg);}}@keyframes a32{100%{transform: translateX(0px) translateZ(0px) translateY(-100px) rotateX(-90deg) rotateY(0deg) rotateZ(90deg);}}@keyframes a33{100%{transform: translateX(0px) translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg);}}@keyframes a34{100%{transform: translateX(110px) translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg) rotateX(-90deg);}}@keyframes a35{100%{transform: translateX(0px) translateZ(0px) translateY(10px) rotateY(90deg) rotateX(-90deg) rotateY(-90deg);}}@keyframes a36{100%{transform: translateX(0px) translateZ(0px) translateY(-100px) rotateY(90deg) rotateX(-90deg);}}@keyframes a37{100%{transform: translateX(110px) translateZ(0px) translateY(-100px) rotateX(-90deg);}}@keyframes a38{100%{transform: translateX(110px) translateZ(0px) translateY(10px) rotateX(0deg);}}@keyframes a81{100%{transform: translateX(110px) translateZ(110px) translateY(-100px) rotateY(90deg);}}@keyframes a82{100%{transform: translateX(0px) translateZ(110px) translateY(-100px) rotateY(0deg);}}@keyframes a11{100%{transform: translateX(0px) translateZ(110px) translateY(-100px) rotateY(90deg);}}@keyframes a12{100%{transform: translateX(0px) translateZ(0px) translateY(-100px) rotateY(90deg) rotateZ(90deg);}}@keyframes a13{100%{transform: translateX(0px) translateZ(110px) translateY(-100px) rotateY(90deg);}}@keyframes a14{100%{transform: translateX(0px) translateZ(0px) translateY(-100px) rotateY(0deg);}}@keyframes a83{50%{transform: translate3d(200px,-200px,200px)}}@keyframes a53{50%{transform: translate3d(-200px,-200px,200px)}}@keyframes a75{50%{transform: translate3d(-200px,200px,200px)}}@keyframes a65{50%{transform: translate3d(200px,200px,200px)}}@keyframes a15{50%{transform: translate3d(-200px,-200px,-200px)}}@keyframes a25{50%{transform: translate3d(200px,-200px,-200px)}}@keyframes a39{50%{transform: translate3d(200px,200px,-200px)}}@keyframes a45{50%{transform: translate3d(-200px,200px,-200px)}}
