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


Posted in HTML / CSS onMarch 08, 2021

关键要点:
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 书本翻页内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 #HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 #HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 #HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 #HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 #HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 #HTML / CSS
You might like
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
vue.js中created方法作用
2018/03/30 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
Django中使用Celery的教程详解
2018/08/24 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python输出决策树图形的例子
2019/08/09 Python
python+OpenCV实现图像拼接
2020/03/05 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
建筑设计师岗位职责
2013/11/18 职场文书
采购部主管岗位职责
2014/01/01 职场文书
班组安全员工作职责
2014/02/01 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers