css图形动画,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:实现自动播放和切换图片

window.onload = function () {

var index = 2 , nextIndex = index+1;

setInterval(function(){

box.classList.add('show'); //自动循环播放动画

},200);

var box = document.querySelector('.box');

var face = document.getElementsByClassName('face');

box.addEventListener("webkitTransitionEnd", function () {

if(index >= 4)

nextIndex = 1; //当face[0]为第4张图片(最后一张)，face[1]为第1张图片

else

nextIndex = index + 1;

face[0].style.backgroundImage = 'url(img/sample'+index+'.jpg)';

face[1].style.backgroundImage = 'url(img/sample'+nextIndex+'.jpg)'

box.classList.remove('show');

index = nextIndex;

})

}

总结：

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，若兼容其他的浏览器请加前缀哦。