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

2021-03-08 0 308

关键要点：
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>

<!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 书本翻页内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

本知识来源于互联网索引，如有侵权请联系我们！

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在！

1、寻代码所有源码、代码、教程和软件均为作者提供和网友推荐收集整理而来！
2、寻代码提供的所有模块、软件等资源，均不提供任何技术服务，请知悉！
3、如您需要商用，请支持正版，寻代码网站所提供的程序仅供学习和研究使用！
4、寻代码源码不得使用于非法商业用途，不得违反国家法律。您必须在下载后24小时内删除！
5、寻代码资源每天实时更新，如遇压缩包解压密码，一律为：www.xundm.com
6、寻代码资源售价和VIP会员只是赞助，收取费用仅维持本站的日常运营所需！
7、如有链接无法下载、失效或广告，请在会员中心下工单！
如有侵犯您版权的，请来信（邮箱:[email protected]）指出，本站将立即改正。

寻代码 CSS css3实现书本翻页效果的示例代码 https://xundm.com/202114272.html