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背景下的@font face规则
May 04 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
CSS3 天气图标动画效果
Apr 06 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执行速度全攻略(上)
2006/10/09 PHP
PHP+DBM的同学录程序(2)
2006/10/09 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
实例Python处理XML文件的方法
2015/08/31 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python学习入门之区块链详解
2017/07/25 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
Python如何定义一个函数
2015/09/01 面试题
采购文员岗位职责
2013/11/20 职场文书
教师个人自我鉴定
2014/02/08 职场文书
行政人事岗位职责
2014/03/17 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
AngularJS实现多级下拉框
2022/03/25 Javascript
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL