CSS3动画（1）：transform实现cube动画
2016-05-08 本文已影响204人
zyfEve
除了可以利用焦点图来展示图片，我们还可以运用CSS3动画来展示图片。今天就给大家带来cube动画。
效果：
cube.gif
（是不是很好玩呢？o(▽)o）
制作思路：制作两个面，分别位于正前面（面1）和上面（面2），过一定时间后面1沿X轴转动90度，翻转至下面，面2翻转至正前面，面1背景替换成面2的背景，并移除翻转动画的div（面2），使面1、2 恢复最初的状态（面1在正前面，面2在上面），面2替换成第3张图片，此过程循环进行。
具体实现：
html部分：
<body>
<div class="outer_box">
<div class="box">
<span class="face"></span>
<span class="face"></span>
</div>
</div>
</body>
关键的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:实现自动播放和切换图片
<script type="text/javascript">
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;
})
}
</script>
总结：
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，若兼容其他的浏览器请加前缀哦。
