先看HMTL代码：

 <div class="container"><div class="box"><div class="box-page top"></div><div class="box-page bottom"></div><div class="box-page left"></div><div class="box-page right"></div><div class="box-page before"></div><div class="box-page after"></div></div></div>

设置一个大容器包裹区域，再设置一个盒子容纳魔方，既然是魔方，肯定有6个面，分别设置上下左右前后不同的类别，但他们肯定有相似之处，故设置box-page类别

做出一个六色魔方，如上图。
CSS代码：

.box {width: 300px;height: 300px;/*控制子元素保持3D转换*/transform-style:preserve-3d;/*transform:rotateX(45deg) rotateY(45deg);*/animation: ro 10s linear infinite;}@keyframes ro{0%{transform: rotateX(0deg) rotateY(0deg);}50%{transform: rotateX(180deg) rotateY(180deg);}}.box-page{width:300px;height:300px;/*位置初始化*/position:absolute;transform-style:preserve-3d;}.bottom {/*background-color: green;*/transform:translateZ(-150px) rotateX(180deg);}

首先得让整个区域立体，不然区域会重叠，即给box盒子设置属性：transform-style:preserve-3d;使其匀速转动则设置动画ro，旋转角度为180度。即前5s为顺时针旋转，后5s为逆时针旋转。后边对每块区域设置为绝对定位，不然区域会被挤下去。同时设置每块区域的偏移度数，如下面的魔方只需要向下平移区域的一半，ransform:translateZ(-150px) 即可，图片需转向transform:rotateX(180deg);，毕竟是下面的图片，转了才能看得到正面的图象。其余的以此类推。

设置每一个区域的图片，此处用JS完成。
JS代码：

 <script type="text/javascript">var arr = document.querySelectorAll(".box-page");//遍历六个面中的每一个面for(var i=0;i<arr.length;i++){//外层循环行for(var r=0;r<3;r++){//循环列for(var c=0;c<3;c++){//创建元素var divs= document.createElement("div");divs.style.cssText = "width: 100px; height: 100px;border:2px solid #fff;box-sizing:border-box;background-color:red;position: absolute;background-image:url(imgaes/"+i+".jpg);background-size:300px 300px;";arr[i].appendChild(divs);divs.style.left =c*100 +"px";divs.style.top  =r*100 +"px";divs.style.backgroundPositionX = -c*100+"px";divs.style.backgroundPositionY = -r*100+"px";}}}
</script>

首先找到每个面的元素，放在数组arr中。在对一面中每一个元素进行操作，共有9个元素，所以为3行3列。创建元素样式，首先插入图片：background-image:url(imgaes/"+i+".jpg);所以将图片顺序设计成0.jpg的格式会方便许多。再来重要的就是：background-size:300px 300px;。将图片设计成区域的大小，不然图片尺寸会不标准。
紧接着要将图片平铺在区域里。其中三处：

divs样式中的position:absolute

divs.style.left =c* 100 +“px”;
divs.style.top =r*100 +“px”;

divs.style.backgroundPositionX = -c* 100+“px”;
divs.style.backgroundPositionY = -r* 100+“px”;

首先对区域设置绝对定位。然后对区域进行平移，再对背景图片进行平移。得到的效果就是图片的另一部分可以完好的出现在区域内，后面可以拼成一张完整的图片。

最后是让图片出现飞出飞进的效果。
CSS代码：

		.box-page div:nth-child(1){animation: a1 4.5s ease-in ;}.box-page div:nth-child(2){animation: a1 4.5s ease-in 0.5s;}@keyframes a1{0%{transform: translateZ(0px) scale(1) rotateZ(0deg);}20%{transform: translateZ(300px) scale(0) rotateZ(720deg);}90%{transform: translateZ(300px) scale(0) rotateZ(720deg);}100%{transform: translateZ(0px) scale(1) rotateZ(0deg);}}

首先在.box-page中设置3D，同时设置一个动画a1，共3个属性，通过Z轴出去，同时缩小且旋转。回来时恢复正常。在每个区域中套用这个动画，但要有延时差异，例如第一张图片直接出去，第二张延时0.5S后在出去，整个效果就完成了。

。。

说实话这个效果还挺酷的，可以记住以后拿来用用！