CSS3实现超炫3D翻书效果（二）

上回书，我们已经简单实现如何翻一页。好，现在我们复习一下。翻书效果的基本原理，请看下html布局：

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

简单再次说明下：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吧....如若有想法想做，就参考下我的博客吧。或者私信也行！