這是一個系列，代碼大同小異，第一個做一個詳細的說明：

思路是在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);
    }

布局很簡單，就是一個孤獨的div：

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

重點部分，js代碼部分：

/*隨機數(shù)函數(shù)*/
function rnd(m,n){
    return parseInt(m+Math.random()*(n-m));
}
/*事件綁定，這里沒有處理兼容*/
document.addEventListener('DOMContentLoaded',function(){
    var oBox=document.getElementById('box');
    //水平方向有7個span，垂直方向有4個span
    var R=4;
    var C=7;
    //先循環(huán)創(chuàng)建28個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';
            /*給每個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;
    /*當前圖片*/
    var iNow=0;
    /*加一個開關，以防鼠標點擊太快出錯*/
    var bReady=true;
    oBox.onclick=function(){
        if(bReady==false){
            return;
        }
        bReady=false;
       iNow++; 
       for(var i=0;i<aSpan.length;i++){
            /*計算span運動的距離，下面有圖說明*/
            var x=aSpan[i].offsetLeft+aSpan[i].offsetWidth/2-oBox.offsetWidth/2;            
            var y=aSpan[i].offsetTop+aSpan[i].offsetHeight/2-oBox.offsetHeight/2;
            /*過渡時間*/
            aSpan[i].style.transition='1s all ease';
            /*圖片運動*/
            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;
        }
    };
    /*運動結束觸發(fā)該事件，誰運動加給誰*/
    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);

計算span炸開的距離用下圖說明：（有點亂，就看彩色的線吧）

111.png

效果圖：

555.png