上回书，我们已经简单实现如何翻一页。好，现在我们复习一下。翻书效果的基本原理，请看下html布局：
简单再次说明下：box为大盒子，主要提供显示区域的左部分；page为要翻转的页面，其包含正面(front)和背面(back)；page2主要提供翻页后显示区域的右部分。
-page定位在页面的右部分，front显示的图片与box的图片组合成一个完整的图。back显示的图片与page2显示的图片组合成一个完整的图。
-翻页前，展示区左部分为box的图，展示区右部分为front的图。
-翻页后，展示区左部分为back的图，展示区右部分为page2的图。
还有一点说明，就是当我们将page翻页后(沿着Y轴旋转-180°)，需要将其拉回(恢复到原来的0°)。并将backd的图与page2的图切换到下一张。
现在我们准备好3张图：
第一步就是我们昨天说看到那样的步骤(具体请看：CSS3实现超炫3D翻书效果(一))，这里就不在重复。
css布局：
*{ margin:0; padding: 0;}
html,body{overflow: hidden;}
#box{
background: url("../images/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;
z-index:2;
transform:perspective(800px) rotateY(0deg);
}
.page .front{
background: url("../images/0.jpg") right top no-repeat;
width:100%; height: 100%;
left:0; top: 0;
position: absolute;
backface-visibility: hidden;
z-index:2;
}
.page .back{
background: url("../images/1.jpg") left top no-repeat;
position: absolute;
width:100%; height: 100%;
left:0; top: 0;
transform: scale(-1,1);
z-index:1;
}
#box .page2{
width: 50%; height: 100%;
top:0; right:0;
position: absolute;
background: url("../images/1.jpg") right top no-repeat;
z-index:1;
}
下面我们主要看下如何拉回与换图的操作
这里我们为防止“麒麟臂”大神，需要做一个开关，当前一个动画结束前再次点击翻页无效。
上js代码：
/* 我们先获取一下需要用到的页面中的元素 */
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');
/* 定义一个变量iNow，这儿里是方便后续页面拉回与换图操作 */
var iNow = 0;
/* 这里定义一个变量，当页面点击后赋值成false,防止“麒麟臂”大神无限点击翻页。
判断当运动完成后赋值为true */
var bReady = true;
/* 给box加一个点击事件，进行翻页 */
oBox.onclick = function(){
/* 我们判断下，如果上次运动没结束就不能再开启新的运动，防止“撞车” */
if(bReady == false) return;
bReady = false;
/* 这里我们将iNow的值进行++，我因为我们翻页了，所有图自然的就会加1 */
iNow ++;
/* 设置翻页的运动时间运动形式等参数 */
oPage.style.transition = '1s all ease';
/* 翻页操作 */
oPage.style.WebkitTransform = 'perspective(800px) rotateY(-180deg)';
/* 这里说明一下“webkitTransitionEnd”为运动完成之后可触发的事件 */
oPage.addEventListener('webkitTransitionEnd',function(){
/* 这里当运动完成后我们进行拉回操作，将page的运动时间等设置为none，
并将翻页角度改为原来的0° */
oPage.style.transition = 'none';
oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)';
/* 下面我就行换图操作 */
/* box的图为iNow%3,为啥模3呢，因为我们有三张图，如果你有八张图就模8 */
oBox.style.background = 'url("../images/'+ (iNow%3) +'.jpg") no-repeat';
oFront.style.background = 'url("../images/'+ (iNow%3) +'.jpg") right top no-repeat';
/* 这里因为back和page2组合成同一张图，且他们比box和fron组合成的图永远多1，所以这里就是(iNow+1)%3 */
oBack.style.background = 'url("../images/'+ ((iNow+1)%3) +'.jpg") left top no-repeat';
oPage2.style.background = 'url("../images/'+ ((iNow+1)%3) +'.jpg") right top no-repeat';
/* 这里我们所有的运动都完成后就将bReady赋值 为true*/
bReady = true;
},false);
};
效果如下：
至此，我们简单的翻书效果就完成了。也许会有小伙伴问了,那我不能一直看图啊，我们要的是数据。其实想一想原理是一样一样的，翻页后的数据也是前一条的+1吧....如若有想法想做，就参考下我的博客吧。或者私信也行！
