關鍵要點：
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 書本翻頁內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
