通過css3和DOM操作，可以實現(xiàn)多種圖片瀏覽的效果 但是大致思路都是一致的：
1）通過DOM操作循環(huán)創(chuàng)建出來一組元素
? ? document.createElement('標(biāo)簽名')；
? ? 父級.appendChild('obj');
2）給每一個創(chuàng)建出來的元素添加transform變換效果
? ? obj.style.transform=' rotateX(30deg)';
? ? obj.style.transition='1s all ease';
3）當(dāng)變換結(jié)束的時候，瞬間拉回變換并換底圖
? ? obj.addEventListener('transitionend',function(){},false};
? ? obj.style.transform=' rotateX(0deg)';
? ? obj.style.transition='none';
? 當(dāng)前要顯示的一面：url("img/'+iNow%3+'.jpg")；
? 即將要顯示的一面：url("img/'+(iNow+1)%3+'.jpg")；
4）對用戶一些影響當(dāng)前變換的操作進(jìn)行約束
1、爆炸式飛窗換圖
分散效果重點：
每一個小塊的transform：translate('+(aSpan[i].offsetLeft-oBox.offsetWidth/2)+'px,'+(aSpan[i].offsetTop -oBox.offsetHeight/2)+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.4);
2、分塊換圖(百葉窗)
每個小塊的transform: aSpan[i].style.transform='perspective(800px) rotateY(-180deg)';
transition: aSpan[i].style.transition='500ms all ease '+(aSpan[i].c+aSpan[i].r)*200+'ms';
第四個參數(shù)代表等待運動的時間，故生成依次輪流翻轉(zhuǎn)的效果
3、圖片懸停放大特效
document.onmouseover=function(){
當(dāng)前那個元素的transform：rotateZ(90deg);
};
4、3D圖片環(huán)旋轉(zhuǎn)特效
依次出現(xiàn)的效果：
oBj.style.transform ='rotateY('+i*360/N+'deg) translateZ(300px)';
5、簡約翻頁效果
布局如下：
<div id="box">
? ? <div id="page">
? ? ? ? <div class="front"></div>
? ? ? ? <div class="back"></div>
? ? </div>
? ? <div id="page2"></div>
</div>
#page是當(dāng)前的圖片 ，#page2是將要變換的圖片，其中#page的front背景圖片和#box的背景圖片拼成一張當(dāng)前顯示的圖片，#page的back背景圖片和#page2的背景圖片拼成一張即將要換的圖片
