CSS3动画（1）：transform实现cube动画

除了可以利用焦点图来展示图片，我们还可以运用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){/*面1*/
    background: url(../img/sample1.jpg) no-repeat center;
}
.face:nth-child(2){/*面2*/
    transform-origin: left bottom;  /*center bottom也可以*/
    -webkit-transform: translateY(-100%) rotateX(90deg); /*第二面原本与第一个面平行，先让其上移100%，然后往后转90度*/
    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;/*box的中心由原本的正前面的中点位置移至box的中心位置*/
    -webkit-transform: rotateX(0deg);
    -webkit-transition: none;
}
.box.show{/*实现box旋转，box添加此class，实现面1面2转换，移除则变回初始状态。*/
    -webkit-transform:rotateX(-90deg);/*以box的中心为原点沿X轴转动90度*/
    -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，若兼容其他的浏览器请加前缀哦。