基礎(chǔ)知識儲備

-transform:CSS3新增的變形功能，其優(yōu)點是全過程不改變DOM性能更高。在transform下有如下幾個變形樣式：
1）.translate() --- 位置改變(平移)
2）.scale() --- 縮放比例
3）rotate() --- 旋轉(zhuǎn)角度
4）skew() --- 傾斜(斜切)
以上的幾個形式都支持X軸、Y軸、Z軸的變換方向。
但需要注意：
1）要使用3D變換，需要在其父級開啟3D空間：transform-style: preserve-3d;
2）在變形過程中，會出現(xiàn)“抖動”效果，這時我們需要在該元素的該變形屬性加初始值：transform:rotateY(0deg);
3）要想查看到超炫的3D效果還要設(shè)置下景深/透視，transform:perspective(800px) ;這個可以都當(dāng)前元素加或給其元素父級加
-當(dāng)設(shè)置transform:rotate(30deg);旋轉(zhuǎn)角度時可指定其旋轉(zhuǎn)的奇點。transform-origin: x坐標(biāo) y坐標(biāo);

原理級思路

核心思想，這個展示區(qū)分為左右兩部分。
html布局如下：

/* box為整個頁面展示區(qū) */
<div id="box">  
    /* page有前后兩面 */
   <div class="page">   
      <div class="front"></div>
      <div class="back"></div>  
  </div>   
  /* page2為翻頁之后顯示的*/ 
<div class="page2"></div>
</div>

1.當(dāng)未翻頁前，頁面展示如下圖：

整個展示區(qū)(box)分為左右兩個部分，這里我們給box一個背景圖(0.png);然后再給page-front（正面）一個相同背景圖(0.png),并把front定在展示區(qū)的右側(cè)。其實我們看到的一張圖是由兩個相同（但大小原圖為一半）的圖組成。
2.當(dāng)未翻頁前，頁面展示如下圖：

當(dāng)翻頁后，整個展示區(qū)依然為兩部分，左部分為page-back(背面，背景圖(1.png))，右部分為page2背景圖(1.png)。
需要注意的一點就是，當(dāng)page-front進(jìn)行翻頁的旋轉(zhuǎn)奇點為左邊。
css布局代碼如下：

/* 將頁面展示區(qū)box設(shè)置寬高背景 */
#box{    
  background: url("img/0.jpg") no-repeat;  
  width:700px;    height:400px;   
  /* 此處是為了讓Box在中間顯示 */
  margin:100px auto;
  position: relative;
}
  /* 設(shè)定page的位置 */
#box .page{ 
    /* 因為其在展示區(qū)右側(cè)，所以寬度為整個box的一般，并定在右側(cè) */
    width: 50%;    height: 100%; 
    top:0; right:0;
    position: absolute;  
    /* 將開啟3d空間，方便翻頁后front和back的3d變換 */
    transform-style: preserve-3d; 
    /* 奇點設(shè)為左邊 */
    transform-origin: left center;
    /* 設(shè)置翻書（旋轉(zhuǎn)）的運動時間，運動形式 */   
    transition:1s all ease;  
    /* 提升層級否則會被蓋住 */
    z-index:2; 
    /* 設(shè)置景深來更好的展示3D效果，并給旋轉(zhuǎn)角度一個初始值，防止抖動發(fā)生 */
   transform:perspective(800px) rotateY(0deg);
}
/* 配置旋轉(zhuǎn)頁的前頁 */
.page .front{    
     /* 寬高與父級page一樣 */
     width:100%; height: 100%;   
     position: absolute;  
     left:0; top: 0;
    /* 將背景設(shè)成為與前一頁相同的背景,并且只要右面的那部分，與頁面左部分拼接 */
     background: url("img/0.jpg") right top no-repeat; 
   /* backface-visibility屬性和3D transform效果相關(guān)，它決定當(dāng)一個元素的背面面是否可見 */ 
     backface-visibility: hidden;  
   /* 提升層級否則會被蓋住 */
     z-index:2;
}
/* 配置旋轉(zhuǎn)頁的后頁 */
.page .back{   
     /* 寬高與父級page一樣 */
    width:100%; height: 100%;
     /* 將背景設(shè)成為與下一頁相同的背景,并且只要左面的那部分，與右部分的page2拼接 */
    background: url("img/1.jpg") left top no-repeat;    
    position: absolute;
    left:0;    top: 0;    
    /* 這里設(shè)置將back進(jìn)行水平方向上的鏡像變化，因為當(dāng)page旋轉(zhuǎn)180°后， back顯示的效果不對*/
    transform: scale(-1,1); 
    /* 改變層級避免蓋住其他頁面 */  
    z-index:1;
}
/* 配置pages展示區(qū) */
#box .page2{   
   /* 因為其只在頁面右側(cè)展示所以寬為Box的一半 */ 
    width: 50%;height: 100%;  
    top:0;right:0;   
    position: absolute;
    /* 將背景設(shè)成為與下一頁相同的背景,并且只要右面的那部分，與左部分（.page .back）拼接 */  
   background: url("img/1.jpg") right top no-repeat
    /* 改變層級避免蓋住其他頁面 */   
   z-index:1;
}

下面我們通過js來控制page進(jìn)行翻頁(沿著Y軸反向旋轉(zhuǎn)180°)就可以了
js代碼如下：

var oBox = document.getElementById('box');
var oPage  = document.querySelector('.page');
oBox.onclick = function(){   
   oPage.style.WebkitTransform = 'perspective(800px) rotateY(-180deg)';
};

這里只是簡單的針對兩個圖片來實現(xiàn)翻書的效果。
如下圖：

ps:非常感謝尼古拉斯?屌?大斌哥，生動的講解旋轉(zhuǎn)時的X軸、Y軸、Z軸及其正方向。