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 相关文章推荐
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 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
PHP 模拟$_PUT实现代码
2010/03/15 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
开始着手第一个Django项目
2015/07/15 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
css sprite简单实例
2016/05/23 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
教师作风建设剖析材料
2014/10/11 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书