css3+js翻页效果一：爆炸翻页

这是一个系列，代码大同小异，第一个做一个详细的说明：

思路是在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：

重点部分，js代码部分：

/*随机数函数*/
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;
    //先循环创建28个span
    for(var r=0; r

计算span炸开的距离用下图说明：（有点乱，就看彩色的线吧）

111.png

效果图：

555.png