用CSS3的2D，3D和动画效果来做一个立方照片墙

3D转换：

    平移

    translateX()        沿X轴平移

    translateY()        沿Y轴平移

    translateZ()        沿Z轴平移

    旋转

    rotateX()        绕X轴旋转

    rotateY()        绕Y轴旋转

    rotateZ()        绕Z轴旋转

动画：

1.animation对动画做一些规定

Code：

index.html

<div id="container"><div id="box"><div class="front"><img src="imgs/1.jpg"/></div>        <!--图片地址改为对应的本地地址--><div class="back"><img src="imgs/2.jpg"/></div><div class="left"><img src="imgs/3.jpg"/></div><div class="right"><img src="imgs/4.jpg"/></div><div class="top"><img src="imgs/5.jpg"/></div><div class="bottom"><img src="imgs/6.png"/></div></div>
</div>

main.css

* {padding: 0;margin: 0;
}
#container{width: 100%;height: 650px;display: flex;align-items: center;justify-content: center;perspective: 500px;
}
#box{width: 200px;height:200px;transform-style:preserve-3d ;transform: translateZ(-100px);transition: transform 1s;animation: spin 13s linear infinite;
}
#box div{width: 200px;height:200px;position: absolute;
}
img{width: 200px;height: 200px;opacity: 0.9;
}
/*立方体的六个面*/
.front{background-color: rgba(0,255,255,0.2);transform: translateZ(100px);           /*往外移动100像素*/
}
.back{background-color: rgba(0,255,0,0.3);transform: translateZ(-100px) rotateY(180deg);           /*往里移动100像素，绕Y轴旋转180度*/
}
.left{background-color: rgba(0,0,255,0.3);transform: translateX(-100px) rotateY(-90deg);      /*往左移动100像素，绕Y轴旋转90度*/
}
.right{background-color: rgba(255,255,0,.3);transform: translateX(100px) rotateY(90deg);      /*往右移动100像素，绕Y轴旋转90度*/
}
.top{background-color: rgba(255,0,255,.3);transform: translateY(-100px) rotateX(90deg);      /*向上移动100像素，绕X轴旋转90度*/
}
.bottom{background-color: rgba(255,0,0,0.3);transform: translateY(100px) rotateX(-90deg);        /*向下移动100像素，绕X轴旋转90度*/
}
/*动画*/
@keyframes spin
{0% {transform: rotateX(0deg);}20%{transform: translateZ(-100px) rotateX(-90deg) rotateY(-90deg);}40% {transform: rotateX(180deg);}60% {transform: rotateX(360deg) rotateY(0deg);}80% {transform: rotateX(360deg) rotateY(180deg);}100% {transform: rotateX(360deg) rotateY(360deg);}
}

效果图：

demo演示地址：

http://kysonlai.gitee.io/css3_cubic_wall/