用户名: 用QQ登录本站
密 码: 注册
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 劳动节 12
2021年 端午节 56
2022年 元 旦 257
2022年 春 节 288
 
  • 您现在的位置:首页 >> JS >> 内容

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

    内容摘要: !DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'meta name='viewport' content='width=device-width, initial-scale=1.0'titleDocument/title/headstyle.book{margin: auto;margin-top: 2......

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

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/3/9 发布时间:16:09:05 点击:313 录入:齐天大圣
  • 上一篇:文本框textarea根据输入内容行数多少自适应调节
  • 下一篇:js实现星星闪特效
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.01 Build 21.03.31(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021