css3+js翻页效果三：书本翻页

css样式是酱紫的：

*{margin:0; padding:0}
body,html{
    /*防止抖动*/
    overflow: hidden;
}
#box{ 
   width:700px;
    height:400px;
    background: url("img/0.jpg")
    no-repeat;
    margin:100px auto;
    position:relative;
}
#box .page{
    /*在box的右半部分*/
    width: 50%;
    height: 100%;
    top:0;
    right:0;
    position: absolute;
    /*开启3d模式*/
    transform-style: preserve-3d; 
   /*设定旋转中心*/
    transform-origin: left center;
    transition:1s all ease; 
   z-index:2; 
   /*初始化*/ 
   transform:perspective(800px) rotateY(0deg);
}
#box .page div{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
#box .page .front{
    /*显示图片的右半部分*/
    background: url("img/0.jpg") right top no-repeat;
    /*不显示背面*/
    backface-visibility: hidden; 
   /*层级比背面高*/ 
   z-index:2;
}
#box .page .back{
    background:url("img/1.jpg") left top no-repeat;
    z-index: 1;
   transform: scale(-1,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;
}

这里面有几个比较重要的css3知识点：

1、transform-style:preserve-3d;开启3d模式，这样才真正的是3d效果，后面的
backface-visibility: hidden;
z-index:2;才会有三维效果
transform-style:flat; 默认是平面

2、 backface-visibility: hidden; 是背面不可见
backface-visibility: visible; 是背面可见

3、transform: scale(-1,1); 水平翻转
scale(x,y)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转，在参数中规定角度。

4、 transform-origin: left center;
transform-origin: x-axis y-axis z-axis;
x-axis：定义视图被置于 X 轴的何处。可能的值：
left
center
right
length
%
y-axis：定义视图被置于 Y 轴的何处。可能的值：
top
center
bottom
length
%
z-axis：定义视图被置于 Z 轴的何处。可能的值：
length

5、transform:perspective
perspective: number|none;
number：元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视。
transform:rotate
rotate(angle)
定义 2D 旋转，在参数中规定角度。

rotate3d(x,y,z,angle)
定义 3D 旋转。

rotateX(angle)
定义沿着 X 轴的 3D 旋转。

rotateY(angle)
定义沿着 Y 轴的 3D 旋转。

rotateZ(angle)
定义沿着 Z 轴的 3D 旋转。

接下来是简单的布局：

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

最后是js部分的代码：

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);

这就是结果啦。效果就像是翻书一样：
给个图：

Paste_Image.png