超简单3D翻页效果

style(如下)
<style>
    *{
        margin:0;
        padding: 0;
    }
    html,body{overflow: hidden;}
    #box{
        background: url("img/0.jpg") no-repeat;
        width:700px;
        height:400px;
        margin:100px auto;
        position: relative;
    }
    #box .page{
        width: 50%;
        height: 100%;
        top:0;
        right:0;
        position: absolute;
        transform-style: preserve-3d;
        transform-origin: left center;
        transition:1s all ease;
        z-index:2;
        transform:perspective(800px) rotateY(0deg);
    }
    .page div{
        width:100%;
        height: 100%;
        left:0;
        top: 0;
    }
    .page .front{
        background: url("img/0.jpg") right top no-repeat;
        position: absolute;
        backface-visibility: hidden;
        z-index:2;
    }
    .page .back{
        background: url("img/1.jpg") left top no-repeat;
        position: absolute;
        transform: scale(-1,1);
        z-index:1;
    }

    #box .page2{
        width: 50%;
        height: 100%;
        top:0;
        right:0;
        position: absolute;
        background: url("img/1.jpg") right top no-repeat;
        z-index:1;
    }

</style>
js(如下)
<script>
    document.addEventListener('DOMContentLoaded',function(){
        var oBox = document.getElementById('box');
        var oPage  = document.querySelector('.page');
        var oPage2  = document.querySelector('.page2');
        var oFront  = document.querySelector('.front');
        var oBack  = document.querySelector('.back');
        var iNow = 0;
        var bReady = true;
        oBox.onclick = function(){
            if(bReady==false) {return;}
            bReady = false;
            iNow++;
            oPage.style.transition = '1s all ease';
            oPage.style.WebkitTransform = 'perspective(800px) rotateY(-180deg)';
        };
        oPage.addEventListener('transitionend',function(){
            //1.瞬间拉回
            oPage.style.transition = 'none';
            oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)';
            //2.换图
            oBox.style.background = 'url("img/'+(iNow%3)+'.jpg") no-repeat';
            oFront.style.background = 'url("img/'+(iNow%3)+'.jpg") right top no-repeat';
            oBack.style.background = 'url("img/'+((iNow+1)%3)+'.jpg") left top no-repeat';
            oPage2.style.background = 'url("img/'+((iNow+1)%3)+'.jpg") right top no-repeat';
            bReady = true;
        },false);
    },false);
</script>
html(如下)
<div id="box">
    <div class="page">
        <div class="front"></div>
        <div class="back"></div>
    </div>
    <div class="page2"></div>
</div>

赶快试试效果吧