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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
HTML常用标签超详细整理
Mar 19 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
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
Python实现FM算法解析
2019/06/18 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
python实现五子棋程序
2020/04/24 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
django跳转页面传参的实现
2020/09/17 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
2015年元旦活动总结
2014/05/09 职场文书
关于运动会的广播稿
2014/09/22 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
师德承诺书2015
2015/04/28 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
小学教研工作总结2015
2015/05/13 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
Tomcat用户管理的优化配置详解
2022/03/31 Servers
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript