這是一個(gè)系列，代碼大同小異饮寞，第一個(gè)做一個(gè)詳細(xì)的說明：

思路是在div里面鋪一層span列吼，span是100*100像素的，詳解如圖：

rc.png

以下是css樣式代碼：

    *{margin: 0; padding: 0;}
    html,body{
        /*防止頁面抖動*/
        overflow: hidden;
    }
    #box{
        width:700px;
        height:400px;
       background:#ccc;
        position:relative;
        /*需要加上第二張圖*/
        background:url("img/1.jpg") no-repeat;
        margin:100px auto;
    }
    #box span{
        width:100px;
        height:100px;
        position:absolute;        background:url("img/0.jpg") no-repeat;
        /*使用是需要先初始化*/
        transform: perspective(800px) translate(0,0) rotateX(0deg) rotateY(0deg) scale(1);
    }

布局很簡單慌申，就是一個(gè)孤獨(dú)的div：

<div id="box"></div>

重點(diǎn)部分蹄溉，js代碼部分：

/*隨機(jī)數(shù)函數(shù)*/
function rnd(m,n){
    return parseInt(m+Math.random()*(n-m));
}
/*事件綁定，這里沒有處理兼容*/
document.addEventListener('DOMContentLoaded',function(){
    var oBox=document.getElementById('box');
    //水平方向有7個(gè)span柒爵，垂直方向有4個(gè)span
    var R=4;
    var C=7;
    //先循環(huán)創(chuàng)建28個(gè)span
    for(var r=0; r<R; r++){
        for(var c=0; c<C; c++){
            var aSpan=document.createElement('span');
            /*先求span寬高*/
            var w=oBox.offsetWidth/C;
            var h=oBox.offsetHeight/R;
            aSpan.style.width=w+'px';
            aSpan.style.height=h+'px';
            /*給每個(gè)span定位*/
            aSpan.style.left=w*c+'px';
            aSpan.style.top=h*r+'px';
            /*添加到box*/
            oBox.appendChild(aSpan);
            /*span里面的背景圖片也需要定位*/ 
           aSpan.style.backgroundPosition=(-aSpan.offsetLeft)+'px '+(-aSpan.offsetTop)+'px';
        }
    }
    var aSpan=oBox.children;
    /*當(dāng)前圖片*/
    var iNow=0;
    /*加一個(gè)開關(guān)棉胀，以防鼠標(biāo)點(diǎn)擊太快出錯(cuò)*/
    var bReady=true;
    oBox.onclick=function(){
        if(bReady==false){
            return;
        }
        bReady=false;
       iNow++; 
       for(var i=0;i<aSpan.length;i++){
            /*計(jì)算span運(yùn)動的距離，下面有圖說明*/
            var x=aSpan[i].offsetLeft+aSpan[i].offsetWidth/2-oBox.offsetWidth/2;            
            var y=aSpan[i].offsetTop+aSpan[i].offsetHeight/2-oBox.offsetHeight/2;
            /*過渡時(shí)間*/
            aSpan[i].style.transition='1s all ease';
            /*圖片運(yùn)動*/
            aSpan[i].style.transform='perspective(800px) translate('+x+'px,'+y+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.4)';
            /*透明度需要更改為0*/
            aSpan[i].style.opacity=0;
        }
    };
    /*運(yùn)動結(jié)束觸發(fā)該事件，誰運(yùn)動加給誰*/
    aSpan[aSpan.length-1].addEventListener('transitionend',function(){        for(var i=0;i<aSpan.length;i++){
            /*圖片瞬間拉回*/
            aSpan[i].style.transition='none';
            aSpan[i].style.transform='perspective(800px) translate(0,0) rotateX(0deg) rotateY(0deg) scale(1)';
            /*透明度記得改回來*/
            aSpan[i].style.opacity=1;
            /*換圖*/
            aSpan[i].style.backgroundImage='url("img/'+iNow%3+'.jpg")';  
          oBox.style.backgroundImage='url("img/'+((iNow+1)%3)+'.jpg")'; 
           bReady=true;
        }
    },false);
},false);

計(jì)算span炸開的距離用下圖說明：（有點(diǎn)亂驮瞧，就看彩色的線吧）

111.png

效果圖：

555.png