关键要点:
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添加点击事件,控制元素样式实现翻页动画
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- Merryland《Merryland》[320K/MP3][69.48MB]
- 苏芮.1991-停在我心里的温柔【福茂】【WAV+CUE】
- 苏慧伦.2020-面面Every.Side.of.Me【相信音乐】【WAV+CUE】
- 群星.1991-不一样的感觉REMIX【宝丽金】【WAV+CUE】
- 银霞.1983-《你那好冷的小手》珍藏纪念版[WAV分轨]
- 银霞.2002-《国语巨星专辑VOL.3》2CD台湾版[WAV+CUE]
- 金池刘罡《昨日情歌HQ》头版限量编号[低速原抓WAV+CUE]
- 段奥娟.2024-23·岁碎念【白米范】【FLAC分轨】
- 顺子.2001-昨日·唯一·更多·顺子自选辑【魔岩】【WAV+CUE】
- 无印良品.1999-私藏三首·原创相对论(EP)【滚石】【WAV+CUE】
- Merryland《Merryland》[FLAC/分轨][170.22MB]
- 庄锭欣 ELKIE《没有你的未来》[320K/MP3][15.78MB]
- 庄锭欣 ELKIE《没有你的未来》[FLAC/分轨][36MB]
- TchaikovskySwanLake,Op.20柴可夫斯基天鹅湖(2013)SACD[Hi-Res]
- 24bit达人艺典《琴歌终极版》整轨WAV+CUE