脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 > css3 书本翻页

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

  发布时间：2021-03-08 17:08:04   作者：no bug no life   我要评论
这篇文章主要介绍了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 书本翻页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

相关文章

  • css transform 翻页动画记录的实现

    这篇文章主要介绍了css transform 翻页动画记录的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学
    2020-12-04

  • HTML5 3D书本翻页动画的实现示例

    这是一款十分炫酷的HTML5 3D书本翻页动画，效果相对比较简单，拖拽鼠标模拟用手翻页，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-28

  • 使用纯CSS实现书籍3D翻页效果的示例

    这篇文章主要介绍了使用纯CSS实现书籍3D翻页效果的示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-19

  • 很酷的HTML5电子书翻页动画特效

    这篇文章主要介绍了很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页，感兴趣的小伙伴们可以参
    2016-02-25

  • 一个不错的html 打印代码支持翻页

    这篇文章主要介绍了一个不错的html 打印代码支持翻页，非常实用，需要的朋友可以参考下
    2014-09-17

  • css实现点击滚动翻页的效果(无js)

    滚动翻页这样的效果想必各位在浏览网页的时候都有见过吧，本文将使用纯css实现这个效果，不含有任何的辅助代码，感兴趣的朋友可以参考下哈，希望可以帮助到你
    2013-03-22

最新评论

关注微信公众号

扫一扫