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添加点击事件,控制元素样式实现翻页动画

到此这篇关于css3实现书本翻页效果的示例代码的文章就介绍到这了,更多相关css3 书本翻页内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

css3实现书本翻页效果的示例代码

郑重声明:本网站发布的内容(图片、视频和文字)以及用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服

发表评论

登录后才能评论