css3图片展示效果

3d翻页效果
步骤
1.静态页面布局

<div class="page">
        <div class="front"></div>
        <div class="back"></div>
 </div>
 <div class="page2"></div>

样式

#box{
            width: 700px;
            height: 400px;
            background: url("img/0.jpg") no-repeat;
            margin: 80px auto;
            position: relative;
        }
        #box .page{
            width: 50%;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            transform-style: preserve-3d;
            transform-origin: left center;
            transition: 200ms all ease;
            transform: perspective(800px) rotateY(0deg);
            z-index: 3;
        }
        #box .page:active{
            transform: perspective(800px) rotateY(-140deg);
        }
        .page .front{
            width: 100%;
            height: 100%;
            left:0;
            top:0;
            background: url("img/0.jpg") right top no-repeat;
            position: absolute;
            z-index: 3;
            backface-visibility: hidden;
            
        }
        .page .back{
            width: 100%;
            height: 100%;
            left:0;
            top:0;
            background: url("img/1.jpg") left top no-repeat;
            position: absolute;
            transform: scale(-1,1);
            z-index: 1;
        }
        #box .page2{
            width: 50%;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background: url("img/1.jpg") right top no-repeat;
            z-index: 1;
        }

document.addEventListener('DOMContentLoaded',function(){
            var oPage = document.querySelector('.page');
            var oBox = document.querySelector('#box');
            oBox.onclick = function(){
                oPage.style.transition = '1s all ease';
                oPage.style.webkitTransform = 'perspective(800px) rotateY(-180deg)';
            };
            oBox.addEventListener('transitionend',function(){
                oPage.style.transition = 'none';
                oPage.style.webkitTransform = 'perspective(800px) rotateY(0deg)';

            },false);
        },false);

document.addEventListener('DOMContentLoaded',function(){
            var oPage = document.querySelector('.page');
            var oFront = document.querySelector('.front');
            var oPage2 = document.querySelector('.page2');
            var oBack = document.querySelector('.back');
            var oBox = document.querySelector('#box');
            var bReady = true;
            oBox.onclick = function(){
                if(bReady==false){return;}
                bReady = false;
                oPage.style.transition = '1s all ease';
                oPage.style.webkitTransform = 'perspective(800px) rotateY(-180deg)';
            };
            var iNow = 0;
            
            oBox.addEventListener('transitionend',function(){
                //当变换结束以后瞬间拉回
                oPage.style.transition = 'none';
                oPage.style.webkitTransform = 'perspective(800px) rotateY(0deg)';
                //换图
                iNow++;
                oBox.style.backgroundImage = 'url("img/'+iNow%3+'.jpg")';
                oFront.style.backgroundImage = 'url("img/'+iNow%3+'.jpg")';

                oBack.style.backgroundImage = 'url("img/'+(iNow+1)%3+'.jpg")';
                oPage2.style.backgroundImage = 'url("img/'+(iNow+1)%3+'.jpg")';
                bReady = true;
            },false);
        },false);