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就行：

js代码

document.addEventListener('DOMContentLoaded',function(){
    var oBox=document.getElementById('box');
    var R=4;
    var C=7; 
   for(var r=0; r

效果图：

Paste_Image.png