如何利用CSS3實現3D翻書效果
- 不言原創
- 2018-06-25 16:56:133255瀏覽
這篇文章主要介紹了CSS3實現3D翻書效果，基於CSS3新屬性Animation及transform實現類似翻書效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
#先上效果圖：（樣式有點醜，可以忽略一下下，效果出來了就好，後期加到其他項目中方便更改0.0）
類似翻書效果，原本的意思是使用JS來控制的，點擊一次之後使用setInterval去控制書頁翻過去的動畫，當書頁翻轉180°之後，清除掉setInterval，但當我連續點擊，那之前沒有翻轉180°的書頁將無法繼續完成之前的動作，可以用清除setInterval的方式，但總感覺動畫效果不好，當然還有其他解決辦法，但突然想到，CSS3為我們提供了animation，我們為什麼不去使用使用呢，只要為加上animation動畫可以直接避免這個問題，animation動畫預設是每次都執行完動畫，所以，當出現連點的時候，就會像圖中看到的那樣，每一頁都自然翻頁，下面貼上程式碼，及實作步驟：
註：本實例JS部分皆以原生JS編寫，不善用原生JS的，可用jQuery等對三方框架改寫
html部分：（這部分真心····· ·，算了，醜就醜吧~.~）
<body>
<!-- 所展示的书的内容 -->
<p class="book">
<p class="page">
<span>1</span>
<span>2</span>
</p>
<p class="page">
<span>3</span>
<span>4</span>
</p>
<p class="page">
<span>5</span>
<span>6</span>
</p>
<p class="page">
<span>7</span>
<span>8</span>
</p>
<p class="page">
<span>9</span>
<span>10</span>
</p>
<p class="page">
<span>11</span>
<span>12</span>
</p>
<p class="page">
<span>13</span>
<span>14</span>
</p>
<p class="page">
<span>15</span>
<span>16</span>
</p>
<p class="page">
<span>17</span>
<span>18</span>
</p>
<p class="page">
<span>19</span>
<span>20</span>
</p>
</p>
<!-- 用来控制上一页和下一页操作 -->
<input type="button" value="上一页" id="before"/>
<input type="button" value="下一页" id="after"/>
</body>CSS部分：（透過改變transform中rotatey的值，來實現書頁的翻轉效果）
<style>
.book{
width: 460px;
height: 300px;
position: relative;
margin: 150px 400px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotatex(30deg);
}
.page{
width: 230px;
height: 300px;
border: 1px solid #666;
position: absolute;
rightright: 0;
transform-origin: left;
transform-style: preserve-3d;
backface-visibility:hidden;
font-size: 60px;
text-align: center;
line-height: 300px;
}
.page span{
display: block;
width: 100%;
position: absolute;
background-color: #00FFFF;
}
.page span:nth-child(2){
transform: rotatey(-180deg);
backface-visibility:hidden;
}
/*以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画，
使用时需要在JS中点击上一页时添加改属性值*/
/*翻书下一页的动画*/
@keyframes page {
0%{
transform: rotatey(0deg);
}
100%{
transform: rotatey(-180deg);
z-index: 10;
}
}
/*翻书上一页的动画*/
@keyframes page1 {
0%{
transform: rotatey(-180deg);
z-index: 10;
}
100%{
transform: rotatey(0deg);
}
}
</style>JS部分（JS部分主要實現點擊上/下一頁時，為對應的p添加animation屬性）
<script>
var before = document.querySelector("#before");
var after = document.querySelector("#after");
var book = document.querySelector(".book");
var page = document.getElementsByClassName("page"); 7 rotate();
function rotate(){
var middle = 0;12 for(var z=0;z<book.children.length;z++){
page[z].style.zIndex = book.children.length-z;
}
after.onclick = function(){
if(middle != book.children.length){
page[middle].style.animation = "page 1.5s linear 1 forwards";
middle++;
}else{
middle = book.children.length;
}
};
before.onclick = function(){
if(middle != 0){
page[middle-1].style.animation = "page1 1.5s linear 1 forwards";
middle--;
}else{
middle = 0;
}
}
}
</script>關於最後JS部分，主要作用在於，當點擊上/下一頁時，為對應的p添加animation屬性，具體animation的詳解，還是需要查看API。
介於相容性的問題，這裡比較好的解決方法是添加class，而不是去添加animation，為適應更多瀏覽器，需要添加前綴-webkit-、-moz-···· ···，所以在一個類別中寫好這些東西，直接添加類別就可以了，或者寫一個函數，封裝好，能直接輸出需要的字串就好。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是如何利用CSS3實現3D翻書效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！