除了可以利用焦點圖來展示圖片，我們還可以運用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，若兼容其他的瀏覽器請加前綴哦。
