除了可以利用焦点图来展示图片，我们还可以运用CSS3动画来展示图片。今天就给大家带来cube动画。
效果：
cube.gif
（是不是很好玩呢？o()o）
制作思路：制作两个面，分别位于正前面（面1）和上面（面2），过一定时间后面1沿X轴转动90度，翻转至下面，面2翻转至正前面，面1背景替换成面2的背景，并移除翻转动画的div（面2），使面1、2 恢复最初的状态（面1在正前面，面2在上面），面2替换成第3张图片，此过程循环进行。
具体实现：
html部分：
关键的css部分：
起初让面1在正前方，背景为图片1，面2为上方，背景为图片2，形成一个简单的立体形状.
面1、2：
.face:nth-child(1){
background: url(../img/sample1.jpg) no-repeat center;
}.face:nth-child(2){
transform-origin: left bottom;
-webkit-transform: translateY(-100%) rotateX(90deg);
background: url(../img/sample2.jpg) no-repeat center;
}效果是这样的
PJPF%XL7ZGO6VN44_PA%L$J.png
box：
.box{ -webkit-transform-style: preserve-3d; -webkit-transform-origin:center center -200px;
-webkit-transform: rotateX(0deg); -webkit-transition: none;
}.box.show{
-webkit-transform:rotateX(-90deg);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(.17,.67,.68,1.43) 1s;
}outer_box：
.outer_box{ -webkit-perspective: 1000;
}这部分很重要，如果没有设置perspective，翻转图片会是片状的感觉。效果会是这样的。
cube2.gif
（一片一片的感觉，很奇怪有木有(ˉˉ；)...）
js:实现自动播放和切换图片
总结：
1、在祖父div设置-webkit-perspective: 1000;可增强3D效果。也可以改变perspective-origin哦（默认是50% 50%）。
2、在父元素设置-webkit-transform-style: preserve-3d;使用3D效果实现变换。同样可以改变-webkit-transform-origin。
3、效果中旋转至正前面顿一下的效果是利用bezier曲线实现的。只要把transition中的速度曲线替换成下面网址的值就可以了。
bezier的网址：http://cubic-bezier.com/#.17,.67,.83,.67（十分有用！好好收藏哦...）
4、我只兼容chrome，若兼容其他的浏览器请加前缀哦。
作者：zyfEve
链接：https://www.jianshu.com/p/dd1be967aeab
