基于CSS3新属性Animation及transform实现类似翻书效果
注：本实例JS部分均以原生JS编写，不善用原生JS的，可用jQuery等对三方框架改写
先上效果图：（样式有点丑，可以忽略一下下，效果出来了就好，后期加到其他项目中方便更改0.0）
类似翻书效果，原本的意思是使用JS来控制的，点击一次之后使用setInterval去控制书页翻过去的动画，当书页翻转180°之后，清除掉setInterval，但当我连续点击，那之前没有翻转180°的书页将无法继续完成之前的动作，可以用清除setInterval的方式，但总感觉动画效果不好，当然还有其他解决办法，但突然想到，CSS3为我们提供了animation，我们为什么不去使用使用呢，只要为加上animation动画就可以直接避免这个问题，animation动画默认是每次都执行完动画，所以，当出现连点的时候，就会像图中看到的那样，每一页都自然翻页，下面贴上代码，及实现步骤：
html部分：（这部分真心·····，算了，丑就丑点吧~.~）
<body>
<!-- 所展示的书的内容 -->
<div class="book">
<div class="page">
<span>1</span>
<span>2</span>
</div>
<div class="page">
<span>3</span>
<span>4</span>
</div>
<div class="page">
<span>5</span>
<span>6</span>
</div>
<div class="page">
<span>7</span>
<span>8</span>
</div>
<div class="page">
<span>9</span>
<span>10</span>
</div>
<div class="page">
<span>11</span>
<span>12</span>
</div>
<div class="page">
<span>13</span>
<span>14</span>
</div>
<div class="page">
<span>15</span>
<span>16</span>
</div>
<div class="page">
<span>17</span>
<span>18</span>
</div>
<div class="page">
<span>19</span>
<span>20</span>
</div>
</div>
<!-- 用来控制上一页和下一页操作 -->
<input type="button" value="上一页" id="before"/>
<input type="button" value="下一页" id="after"/>
</body>
CSS部分：（通过改变transform中rotatey的值，来实现书页的翻转效果）
<style>
.book{
width: 460px;
height: 300px;
position: relative;
margin: 150px 400px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotatex(30deg);
}
.page{
width: 230px;
height: 300px; border: 1px solid #666;
position: absolute;
right:;
transform-origin: left;
transform-style: preserve-3d;
backface-visibility:hidden;
font-size: 60px;
text-align: center;
line-height: 300px;
}
.page span{
display: block;
width: 100%;
position: absolute;
background-color: #00FFFF;
}
.page span:nth-child(2){
transform: rotatey(-180deg);
backface-visibility:hidden;
} /*以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画，
使用时需要在JS中点击上一页时添加改属性值*/
/*翻书下一页的动画*/
@keyframes page {
0%{
transform: rotatey(0deg);
}
100%{
transform: rotatey(-180deg);
z-index:;
}
}
/*翻书上一页的动画*/
@keyframes page1 {
0%{
transform: rotatey(-180deg);
z-index:;
}
100%{
transform: rotatey(0deg);
}
} </style>
JS部分（JS部分主要实现点击上/下一页时，为相应的div添加animation属性）
<script>
var before = document.querySelector("#before");
var after = document.querySelector("#after");
var book = document.querySelector(".book");
var page = document.getElementsByClassName("page"); rotate(); function rotate(){
var middle = 0; for(var z=0;z<book.children.length;z++){
page[z].style.zIndex = book.children.length-z;
}
after.onclick = function(){
if(middle != book.children.length){
page[middle].style.animation = "page 1.5s linear 1 forwards";
middle++;
}else{
middle = book.children.length;
}
};
before.onclick = function(){
if(middle != 0){
page[middle-1].style.animation = "page1 1.5s linear 1 forwards";
middle--;
}else{
middle = 0;
}
}
}
</script>
关于最后JS部分，主要作用在于，当点击上/下一页时，为相应的div添加animation属性，具体animation的详解，还是需要查看API。
介于兼容性的问题，这里比较好的解决办法是添加class，而不是去添加animation，为适应更多浏览器，需要添加前缀-webkit-、-moz-·······，所以在一个类中写好这些东西，直接添加类就可以了，或者写一个函数，封装好，能直接输出需要的字符串就好。
基于CSS3新属性Animation及transform实现类似翻书效果的更多相关文章
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- css3新属性position: sticky 一分钟实现 导航栏悬停功能
css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用纯CSS3实现超立体的3D图片侧翻倾斜效果
原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...
- css3特效第一篇--旋转的背景&翻书效果
一.html遮盖层与css3的旋转动画 >效果图(加载可能会慢一点儿,请稍等...): >实现思路:在一个大的div中装入一个底层img和顶层的div(里面的内容按照以上图片呈现的样式布局 ...
- css3新属性的总结
今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...
- css3新属性的学习使用
display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...
随机推荐
- c++ 设计模式3 （重构技法 Template Method）
1. 重构 面向对象设计模式是“好的面向对象设计”,所谓“好的面向对象设计”指的是那些可以满足 “应对变化,提高复用”的设计. 设计模式的要点是“寻找变化点,然后在变化点处应用设计模式,从而更好地理解 ...
- C++面向对象设计
一. 组合(复合),继承,委托 1.composition(组合)has-a 1.1 组合举例:(Adapter 设计模式) 关系: 利用deque功能实现所有queue功能 template < ...
- 使用 satis 搭建一个私有的 Composer 包仓库
在我们的日常php开发中可能需要使用大量的composer包,大部份都可以直接使用,但在公司内部总有一小部份包是不能公开的,这时候我们就需要搭建一个公司内部使用的composer仓库,好在compos ...
- InAction-根据LBS数据手机用户移动轨迹
看了以后学了不少通信运营商关于用户数据记录的知识啊. 本来想从网上找真实数据集的,但是网上的数据不合这个DEMO的场景要求,于是用作者提供的python脚本生成一定数据量的数据来实践(当然,这些数据结 ...
- JQuery实现回车代替Tab键(按回车跳到下一栏)
一个提交按钮以后,用户如果按了键盘的回车键,默认情况下,就会提交这个表单了.这样对于用户输入各个表单项目,用户体验很不好,输入完一个项目,或者用鼠标选择下一个项目,或者用键盘的Tab键选中下一个项目. ...
- [Arduino] 基于Xbee Pro和网络技术的智能公交系统设计
转自:http://www.21ic.com/app/rf/201112/99474.htm 引言 公共交通具有个体交通无法比拟的强大优势,优先发展城市公共交通系统是解决大.中城市交通问题的最佳途径. ...
- 『创意欣赏』30幅逼真的 3D 虚拟现实环境呈现
又到周末了,给大家分享30幅漂亮的 3D 虚拟现实环境呈现,放松一下.这些创造性的场景都是通过 3D 图形设计软件,结合三维现实环境渲染制作出来的.一起欣赏:) 您可能感兴趣的相关文章 20幅温馨浪漫 ...
- iOS 6编程Cookbook(影印版)
<iOS 6编程Cookbook(影印版)> 基本信息 原书名:iOS 6 Programming Cookbook 作者: Vandad Nahavandipoor 出版社:东南大学出版 ...
- mac下修改mysql登录密码
mysql版本5.7.9 在mac终端下修改mysql用户登录密码 终端命令如下: update mysql.user set authentication_string=PASSWORD(" ...
- 如何解决firefox下window.event的问题
一.在函数中传递event参数 在函数中传递event参数,这样我们就可以兼容IE和FF的event的获取了,如下面的函数: function _test(evt){ var src = evt ...