首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3实现3D翻书效果

Posted in HTML / CSS onJune 20, 2016

先上效果图：（样式有点丑，可以忽略一下下，效果出来了就好，后期加到其他项目中方便更改0.0）

CSS3实现3D翻书效果

类似翻书效果，原本的意思是使用JS来控制的，点击一次之后使用setInterval去控制书页翻过去的动画，当书页翻转180°之后，清除掉setInterval，但当我连续点击，那之前没有翻转180°的书页将无法继续完成之前的动作，可以用清除setInterval的方式，但总感觉动画效果不好，当然还有其他解决办法，但突然想到，CSS3为我们提供了animation，我们为什么不去使用使用呢，只要为加上animation动画就可以直接避免这个问题，animation动画默认是每次都执行完动画，所以，当出现连点的时候，就会像图中看到的那样，每一页都自然翻页，下面贴上代码，及实现步骤：
注：本实例JS部分均以原生JS编写，不善用原生JS的，可用jQuery等对三方框架改写
html部分：（这部分真心·····，算了，丑就丑点吧~.~）

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.     <!-- 所展示的书的内容 -->  
  3.     <div class="book">  
  4.         <div class="page">  
  5.             <span>1</span>  
  6.             <span>2</span>  
  7.         </div>  
  8.         <div class="page">  
  9.             <span>3</span>  
  10.             <span>4</span>  
  11.         </div>  
  12.   
  13.         <div class="page">  
  14.             <span>5</span>  
  15.             <span>6</span>  
  16.         </div>  
  17.   
  18.         <div class="page">  
  19.             <span>7</span>  
  20.             <span>8</span>  
  21.         </div>  
  22.   
  23.         <div class="page">  
  24.             <span>9</span>  
  25.             <span>10</span>  
  26.         </div>  
  27.   
  28.         <div class="page">  
  29.             <span>11</span>  
  30.             <span>12</span>  
  31.         </div>  
  32.   
  33.         <div class="page">  
  34.             <span>13</span>  
  35.             <span>14</span>  
  36.         </div>  
  37.   
  38.         <div class="page">  
  39.             <span>15</span>  
  40.             <span>16</span>  
  41.         </div>  
  42.   
  43.         <div class="page">  
  44.             <span>17</span>  
  45.             <span>18</span>  
  46.         </div>  
  47.   
  48.         <div class="page">  
  49.             <span>19</span>  
  50.             <span>20</span>  
  51.         </div>  
  52.     </div>  
  53.   
  54.     <!-- 用来控制上一页和下一页操作 -->  
  55.     <input type="button" value="上一页" id="before"/>  
  56.     <input type="button" value="下一页" id="after"/>  
  57. </body>    

CSS部分：（通过改变transform中rotatey的值，来实现书页的翻转效果）

CSS Code复制内容到剪贴板
  1. <style>   
  2.         .book{   
  3.             width: 460px;   
  4.             height: 300px;   
  5.             position: relative;   
  6.             margin: 150px 400px;   
  7.             -webkit-transform-style: preserve-3d;   
  8.             -moz-transform-style: preserve-3d;   
  9.             -ms-transform-style: preserve-3d;   
  10.             transform-style: preserve-3d;   
  11.             transform: rotatex(30deg);   
  12.         }   
  13.         .page{   
  14.             width: 230px;   
  15.             height: 300px;   
  16.   
  17.             border: 1px solid #666;   
  18.             position: absolute;   
  19.             rightright: 0;   
  20.             transform-origin: left;   
  21.             transform-style: preserve-3d;   
  22.             backface-visibility:hidden;   
  23.             font-size: 60px;   
  24.             text-align: center;   
  25.             line-height: 300px;   
  26.         }   
  27.         .page span{   
  28.             display: block;   
  29.             width: 100%;   
  30.             position: absolute;   
  31.             background-color: #00FFFF;   
  32.         }   
  33.         .page span:nth-child(2){   
  34.             transform: rotatey(-180deg);   
  35.             backface-visibility:hidden;   
  36.         }   
  37.   
  38.   
  39.         /*以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画，  
  40.             使用时需要在JS中点击上一页时添加改属性值*/  
  41.         /*翻书下一页的动画*/  
  42.         @keyframes page {   
  43.             0%{   
  44.                 transform: rotatey(0deg);   
  45.             }   
  46.             100%{   
  47.                 transform: rotatey(-180deg);   
  48.                 z-index: 10;   
  49.             }   
  50.         }   
  51.         /*翻书上一页的动画*/  
  52.         @keyframes page1 {   
  53.             0%{   
  54.                 transform: rotatey(-180deg);   
  55.                 z-index: 10;   
  56.             }   
  57.             100%{   
  58.                 transform: rotatey(0deg);   
  59.             }   
  60.         }   
  61.            
  62.     </style>   

JS部分（JS部分主要实现点击上/下一页时，为相应的div添加animation属性）

JavaScript Code复制内容到剪贴板
  1. <script>   
  2.     var before = document.querySelector("#before");   
  3.     var after = document.querySelector("#after");   
  4.     var book = document.querySelector(".book");   
  5.     var page = document.getElementsByClassName("page"); 7     rotate();   
  6.   
  7.     function rotate(){   
  8.         var middle = 0;12         for(var z=0;z<book.children.length;z++){   
  9.             page[z].style.zIndex = book.children.length-z;   
  10.         }   
  11.         after.onclick = function(){   
  12.             if(middle != book.children.length){   
  13.                 page[middle].style.animation = "page 1.5s linear 1 forwards";   
  14.                 middle++;   
  15.             }else{   
  16.                 middle = book.children.length;   
  17.             }   
  18.         };   
  19.         before.onclick = function(){   
  20.             if(middle != 0){   
  21.                 page[middle-1].style.animation = "page1 1.5s linear 1 forwards";   
  22.                 middle--;   
  23.         }else{   
  24.             middle = 0;   
  25.             }   
  26.         }   
  27.     }   
  28. </script>   

关于最后JS部分，主要作用在于，当点击上/下一页时，为相应的div添加animation属性，具体animation的详解，还是需要查看API。
 
介于兼容性的问题，这里比较好的解决办法是添加class，而不是去添加animation，为适应更多浏览器，需要添加前缀-webkit-、-moz-·······，所以在一个类中写好这些东西，直接添加类就可以了，或者写一个函数，封装好，能直接输出需要的字符串就好。

CSS3实现3D翻书效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
详解css3 Transition属性（平滑过渡菜单栏案例）
Sep 05 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 #HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 #HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 #HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 #HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 #HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 #HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 #HTML / CSS
西班牙购物网站(115) 新加坡购物网站(41) 巴西购物网站(71) 英国购物网站(954) 加拿大购物网站(185) 中国购物网站(172) 瑞士购物网站(28) 日本购物网站(72) 德国购物网站(227) 韩国购物网站(27)
You might like
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
深入理解JavaScript系列（29）：设计模式之装饰者模式详解
2015/03/03 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
webpack之devtool详解
2018/02/10 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
深入理解Python爬虫代理池服务
2018/02/28 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
高校辅导员推荐信范文
2013/12/25 职场文书
xxx同志考察材料
2014/02/07 职场文书
授权委托书样本
2014/04/03 职场文书
仓库管理计划书
2014/05/04 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
如何写好一份优秀的工作总结？
2019/06/21 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers
css弧边选项卡的项目实践
2023/05/07 HTML / CSS