css3实现书本3D翻页效果代码及重点详解
发布时间：2023-07-20 14:24:51 所属栏目：语言 来源：
导读：使用css3 3d动画可以实现很多实用的炫酷特效，这篇文章就给大家分享一个模拟书本翻页的动画特效，能用户良好的视觉和交互体验，对大家学习和掌握CSS 3d动画也有一定的参考价值。下面是css3书本翻页效果的具体代码，感
|
使用css3 3d动画可以实现很多实用的炫酷特效，这篇文章就给大家分享一个模拟书本翻页的动画特效，能用户良好的视觉和交互体验，对大家学习和掌握CSS 3d动画也有一定的参考价值。下面是css3书本翻页效果的具体代码，感兴趣的朋友一起来学习一下吧。 关键要点： 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添加点击事件，控制元素样式实现翻页动画。 （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
