注：本实例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实现类似翻书效果的更多相关文章

  1. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  2. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  3. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  4. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  5. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  7. css3特效第一篇--旋转的背景&翻书效果

    一.html遮盖层与css3的旋转动画 >效果图(加载可能会慢一点儿,请稍等...): >实现思路:在一个大的div中装入一个底层img和顶层的div(里面的内容按照以上图片呈现的样式布局 ...

  8. css3新属性的总结

    今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...

  9. css3新属性的学习使用

    display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...

随机推荐

  1. IOS 区分缓存 内存 物理存储 逻辑存储

    1. 存储器分为内部存储器(内存)和外部存储器(外存). ①内存 内存是电脑内部临时存放数据的地方,供CPU直接读取,存放在其中的数据要靠电来维持,一旦断电就会丢失.因此,在操作电脑时,应及时地将需要 ...

  2. iOS 应用有用户评论功能 因为潜在色情信息被退回解决方案

    应用的每一次退回都是一次很好的学习机会 这次是说我的应用没有对色情的内容进行监管或屏蔽的管理机制 这里我主要是 评论页面 违法 如下 以下提供几种解决方案: 1.按照苹果给的建议  我们添加协议进去 ...

  3. Wamp,XAMPP 无法启动，端口未占用的故障处理

    打开服务管理里:Service.msc 找到服务:WinHttpAutoProxySvc(WinHTTP 实现了客户端 HTTP 堆栈并向开发人员提供 Win32 API 和 COM 自动化组件以供发 ...

  4. 【Android 界面效果19】Android中shape的使用

    Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了解,稍作总结: 先看下面的代码:         <shape>      ...

  5. Unity封装dll教程整理

    ///作者Unity3d师兄---LeroyYang 通过网上大神们的资料以及自己的整理,学习一下用vs2013简单的封装dll文件,方便接口模式下开发,使得逻辑层更为清晰. 操作步骤 1.打开vs2 ...

  6. iOS数据持久化存储:归档

    在平时的iOS开发中,我们经常用到的数据持久化存储方式大概主要有:NSUserDefaults(plist),文件,数据库,归档..前三种比较经常用到,第四种归档我个人感觉用的还是比较少的,恰恰因为用 ...

  7. 安装 vsftpd

    (1)安装vsftpdsudo apt-get install vsftpd (2)配置sudo vi /etc/vsftpd.conf #anonymous_enable=YESlocal_enab ...

  8. hdu-5703 Desert(水题)

    题目链接: Desert Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 65535/32768 K (Java/Others) Pr ...

  9. 【转】PS学堂之一：展示一下自己做的圆形印章

    共分七个步骤: 1.点击文件--新建,新建一个500×500像素,背景为透明的文件,选择RGB颜色. 2.把前景色和文字颜色设置为正红(R为255,G和B为0). 3.在视图下拉菜单中选择标尺,将横. ...

  10. 安装sybase12.0，运行时报错异常。

    报错为:invalid command line argument ' and' 当通过开始菜单打开"配置服务器"时,回报如上异常,当继续创建服务器是,不会成功.实际上不是程序出错 ...