图片魔方

先看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后在出去，整个效果就完成了。

。。

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