最近在網頁上看到一個使用CSS3製作的很有趣的樣式，通過純css3的使用實現翻書的效果，作爲初學者的我決定實現一下該效果~該網站特效如圖所示：
是不是感覺特效非常棒，直接使用css樣式而不使用圖片大大減少了加載速度，也降低了用戶流量的損耗，實在是一舉兩得，下面我介紹一下我的開發步驟：
經過我對網站代碼的研究，該書籍div分爲以下幾部分
1.最上層是寫着“CSS TRANSFORM”的書皮，和最左面的棱角。
2.第二層是三頁紙（li），當用戶鼠標懸停在該div塊時，這三個li塊的旋轉角度均大幅旋轉，超過100度。
3.下面是後面累着的兩頁紙，隨着前面書頁的動作，小幅度晃動，大約40度左右。
下面是html代碼：
<body>
<div id="book">
<ul class = "book_spine"></ul>
<ul class = "bottom">
<li ></li>
<li ></li>
</ul>
<ul class = "front">
<li ></li>
<li ></li>
<li ></li>
</ul>
<ul class="cover">
<li>一本小書</li>
<li></li>
</ul>
</div>
</body>這裏div的排放順序比較重要，簡單來說就是先寫放在下面的，在寫放到上面的，因爲先寫的先進行排放，後放的東西就會把前放的東西覆蓋上，就可以不用寫z-index了，而且思路也更加清晰。
css代碼太長了，這裏就不貼上來了，要注意的有以下幾點：
1.聲明旋轉點transform-origin:0 100%;一定要在還沒有做旋轉操作之前進行，不然會默認按照50% 50%來旋轉，也就是圖片的中心。
2.一定要將所有瀏覽器的兼容情代碼都寫一遍，例如設置視點：
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
3.注意旋轉的持續時間和角度，原則是：靠前的書頁要選的角度更大，旋轉的時間更長，不然會出現錯誤的顯示情況。
4.第一個頁面也就是書皮需要設置backface-visibility: hidden;當旋轉超過90度時書皮會消失，不然顯示會混亂。
這只是一個很簡單的模仿，與原版還少了陰影效果和使用after與before產生的描邊效果，下次有時間在進行完善。
原版網頁：https://tympanus.net/Development/AnimatedBooks/
我做的不完全版github：https://github.com/StringKun/Fflippage/tree/master
