關鍵要點:
1.css3 3d動畫的掌握
2.如何解決翻轉后頁面內容的改變
3.如何保持書本一直處于居中位置
代碼總覽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .book{ margin: auto; margin-top: 2rem; transform: translate(0,0); perspective: 5000px; max-width: 40%; height: 800px; position: relative; transition:all 1s ease; } .page{ position: absolute; width: 100%; height: 100%; top: 0; right: 0; background-color: pink; cursor: pointer; transition:all 1s ease; transform-origin: left center; transform-style: preserve-3d; } .active{ z-index: 1; } .page.flipped{ transform:rotateY(-180deg) } .back,.front{ text-align: center; position: absolute; backface-visibility: hidden; width: 100%; height: 100%; } .back{ transform:rotateY(180deg) } </style> <body> <div class="book"> <div class="page active"> <div class="front">封面</div> <div class="back">1</div> </div> <div class="page"> <div class="front">2</div> <div class="back">3</div> </div> <div class="page"> <div class="front">4</div> <div class="back">5</div> </div> <div class="page"> <div class="front">6</div> <div class="back">尾面</div> </div> </div> </body> <script> let pages = document.getElementsByClassName('page') let book = document.getElementsByClassName('book')[0] function bookMove(drect){ if(drect==='right'){ book.style.transform = 'translate(50%,0)' }else if(drect==='left'){ book.style.transform = 'translate(0,0)' }else{ book.style.transform = 'translate(100%,0)' } } for(let i = 0;i<pages.length;i++){ pages[i].addEventListener('click',()=>{ if(pages[i].classList.contains('flipped')){ pages[i].classList.remove('flipped') pages[i].classList.add('active') if(i===0){ bookMove('left') } if(pages[i].nextElementSibling!==null){ pages[i].nextElementSibling.classList.remove('active') }else{ bookMove('right') } }else{ pages[i].classList.add('flipped') pages[i].classList.remove('active') if(i===0){ bookMove('right') } if(pages[i].nextElementSibling!==null){ pages[i].nextElementSibling.classList.add('active') }else{ bookMove('close') } } }) } </script> </html>
要點分析
css3動畫屬性解釋:
perspective: 5000px; 這里是透視屬性,可以簡單認為是實現了“近大遠小”效果的屬性
這里需要注意perspective需要設置在進行了3d變換的元素的父元素上,因為進行3d變換
的元素只有以父元素為背景做透視變換才能看到效果。
transition:all 1s ease;這里是過度屬性,可以設置過度時間以及應用的緩動函數
transform-origin: left center;;這個屬性可以設置變換屬性的起始點,這里的意思是以 左中為點進行繞y軸旋轉
transform-style: preserve-3d;;這個屬性可以讓設置了該屬性的元素的子元素也能呈現相同 的基于父元素的透視,前提是子元素也進行了3d變換。
解決頁面內容的顯示問題:
backface-visibility: hidden;讓進行了180度旋轉的元素隱藏,即背面不可視
運用這個屬性可以讓頁面1旋轉180度后隱藏而從-180度旋轉為0度的頁面2顯示,從而實現 書本內容的切換
解決書本居中頁面的問題:
transform: translate(0,0) 通過平移屬性,解決此問題
剩下的就是用js添加點擊事件,控制元素樣式實現翻頁動畫
到此這篇關于css3實現書本翻頁效果的示例代碼的文章就介紹到這了,更多相關css3 書本翻頁內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!