如何使用製作翻書效果？
思路：
首先準備一個div作爲書本，然後準備一個div作爲第一頁，其中還要有兩個div作爲正反面，分別對其各部分屬性進行設置。其中還要爲book與page開啓3D，還用到了一個backface-visible（其實這個屬性我之前沒見到過，這是第一次用 ）屬性，該屬性用來設置當div翻轉一定角度後是否可見，製作好第一頁後，其餘的幾頁與第一頁類似。
注意：
要對每頁的z-index屬性設置，否則將從後向前顯示（四 三 二 一），z-index屬性用於設置它的層疊等級，數字越大層次越高。
最好將正面的div放在反面的下面，這樣顯示時不需要再設置z-index屬性了。
其中設置div的box-sizing屬性爲border-box;這樣爲div設置padding和margin時不會影響元素的寬，高
js部分：
使用querySelector分別獲得book與page元素，聲明一個變量page（初值爲1，第一頁下標是0），來表示第幾頁，當執行book的單擊事件時，就會調用執行function（）函數;函數第一次執行時，將第一頁翻轉-135deg，時間是2s。然後page自加，判斷是否滿足if條件：
若滿足if語句的條件，則說明書本已經翻到最後一頁，並將書本合上，從後往前執行循環，依次將每頁的翻轉角度變爲0即可；
若不滿足，則判斷是否滿足循環執行的條件，進行第二次循環，重複上面過程。。。
效果如下：
具體看代碼：
<style>
body{
background:#666666;
margin: 0;
padding: 0;
}
.book{
position: relative;
margin: 200px auto;/*讓book在頁面居中*/
width:200px;
height: 300px;
background-color: #B22222;
transform-style: preserve-3d;/*開啓3D*/
}
#page1,#page2,#page3,#page4{
transform-style: preserve-3d;/*開啓3D*/
transition: 2s;/*時間是兩秒*/
transform-origin: left;/*並將其旋轉元素的基點位置設置成左邊*/
position: absolute;/*將其分別定位在book中*/
left:0;
top:0;
width:200px;
height:300px;
}
/*設置每頁的層疊等級*/
#page1{
z-index: 4;
}
#page2{
z-index: 3;
}
#page3{
z-index: 2;
}
#page4{
z-index:1;
}
.before{
width:200px;
height:300px;
position: absolute;
left:0;
top:0;
background-color: #32CD32;
text-align:center;
box-sizing: border-box;
border:10px solid white;
font:bold 36px/300px arial;
backface-visibility: hidden;
}
.after{
position:absolute;
width:200px;
height: 300px;
box-sizing: border-box;
left:0;
top:0;
background-color:#DCDCDC;
border:10px solid white;
}
</style>
<body>
<div class="book">
<div id="page1">
<div class="after"></div>
<div class="before">HTML5</div>
</div>
<div id="page2">
<div class="after"></div>
<div class="before">CSS3</div>
</div>
<div id="page3">
<div class="after"></div>
<div class="before">Javascript</div>
</div>
<div id="page4">
<div class="after"></div>
<div class="before">END</div>
</div>
</div>
<script>
var page=0;
var pagedemo = document.querySelectorAll("[id^='page']");
var bookdemo = document.querySelector(".book");
bookdemo.οnclick=function(){
pagedemo[page].style.transition="2s";
pagedemo[page].style.transform="rotateY(-135deg)";
page++;
if(page==4){
var i;
for(i=page-1;i>=0;i--){
pagedemo[i].style.transform="rotateY(0deg)";
}
}
}
</script>
</body>
