css3+js翻页效果二：颗粒翻页

css样式：

*{margin: 0; padding: 0}
    #box{
        width:700px;
        height:400px;
        background:#ccc;
        position:relative;
        margin:100px auto;
    }
    #box span{
        width:100px;
        height:100px;
        position:absolute;
        transition: 1s all ease;
        transform-style: preserve-3d;
        transform: perspective(800px) rotate(0deg);
    }
    #box span .front{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        transform: translateZ(1px);
        background:url("img/0.jpg") no-repeat;
    }
    #box span .back{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        transform:scale(-1,1) translateZ(-1px);
        background:url("img/1.jpg") no-repeat;
    }

布局给个div就行：

<div id="box">
    <!--<span>
        <em class="front"></em>
        <em class="back"></em>
    </span>
    <span></span>-->
</div>

js代码

document.addEventListener('DOMContentLoaded',function(){
    var oBox=document.getElementById('box');
    var R=4;
    var C=7; 
   for(var r=0; r<R; r++){
        for(var c=0; c<C; c++){
            var oSpan=document.createElement('span');
            var w=oBox.offsetWidth/C;
            var h=oBox.offsetHeight/R;
            oSpan.style.width=w+'px';
            oSpan.style.height=h+'px';
            oSpan.style.left=w*c+'px';
            oSpan.style.top=h*r+'px';
            oSpan.innerHTML='<em class="front"></em><em class="back"></em>';
            oBox.appendChild(oSpan); 
           //添加两个自定义属性，用于添加延迟效果
            oSpan.c=c;
            oSpan.r=r;
            oSpan.children[0].style.backgroundPosition=(-oSpan.offsetLeft)+'px '+(-oSpan.offsetTop)+'px';
            oSpan.children[1].style.backgroundPosition=(-oSpan.offsetLeft)+'px '+(-oSpan.offsetTop)+'px';
        }
    }
    var iNow=0;
    var aSpan=oBox.children;
    var bReady=true;
    //点击事件
    document.addEventListener('click',function(){
        //加个开关，以防点太快跳图
        if(bReady==false){
            return;
        }
        bReady=false;
        iNow++;
        for(var i=0;i<aSpan.length;i++){
            //需要一个延迟才能有从左上到右下的翻页效果
            aSpan[i].style.transition='1s all ease '+200*(aSpan[i].r+aSpan[i].c)+'ms';
            aSpan[i].style.transform='perspective(800px) rotateY(180deg)';        }
    },false);
    //运动结束触发事件
    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) rotateY(0deg)';                                 aSpan[i].children[0].style.backgroundImage='url("img/'+iNow%3+'.jpg")';
            aSpan[i].children[1].style.backgroundImage='url("img/'+((iNow+1)%3)+'.jpg")';
        }
        bReady=true;
    },false);
},false);

效果图：

Paste_Image.png