先上效果图：（样式有点丑，可以忽略一下下，效果出来了就好，后期加到其他项目中方便更改0.0）
类似翻书效果，原本的意思是使用js来控制的，点击一次之后使用tinterval去控制书页翻过去的动画，当书页翻转180°之后，清除掉tinterval，但当我连续点击，那之前没有翻转180°的书页将无法继续完成之前的动作，可以用清除tinterval的方式，但总感觉动画效果不好，当然还有其他解决办法，但突然想到，css3为我们提供了animation，我们为什么不去使用使用呢，只要为加上animation动画就可以直接避免这个问题，animation动画默认是每次都执行完动画，所以，当出现连点的时候，就会像图中看到的那样，每一页都自然翻页，下面贴上代码，及实现步骤：
注：本实例js部分均以原生js编写，不善用原生js的，可用jquery等对三方框架改写
html部分：（这部分真心·····，算了，丑就丑点吧~.~）
xml/html code
复制内容到剪贴板
<body><!–所展示的书的内容–><divclass=“book”><divclass=“page”><span>1</span><span>2</span></div><divclass=“page”><span>3</span><span>4</span></div><divclass=“page”><span>5</span><span>6</span></div><divclass=“page”><span>7</span><span>8</span></div><divclass=“page”><span>9</span><span>10</span></div><divclass=“page”><span>11</span><span>12</span></div><divclass=“page”><span>13</span><span>14</span></div><divclass=“page”><span>15</span><span>16</span></div><divclass=“page”><span>17</span><span>18</span></div><divclass=“page”><span>19</span><span>20</span></div></div><!–用来控制上一页和下一页操作&法学门类#8211;><inputtype=“button”value=“教育惩戒权上一页”id=“before”/><inputtype=“button”value=“下一页”id=“after”/></body> css部分：（通过改变transform中travelledrotatey的值，来实现书页的翻转效果）
css code
复制内容到剪贴板
<style第一次国共合作标志> .book{ width:460px; height:300px; position:relative; margin:150px400px; -webkit-transform-style:prerve-3d; -moz-transform-style:prerve-3d; -ms-transform-style:prerve-3d; transform-style:prerve-3d; transform:rotatex(30deg); } .page{ width:230px; height:300px; border:1pxsolid#666; position:absolute; rightright:0; transform-origin:left; transform-style:prerve-3d; backface-visibility:hidden; font-size:60px; text-align:center; line-height:300px; } .pagespan{ display:block; width:100%; position:absolute; background-color:#00ffff; } .pagespan:nth-child(2){ transform:rotatey(-180deg); backface-visibility:hidden; } /*以下两个动画可以只使用第一个，animation中有rever，可以反向执行动画， 使用时需要在js中点击上一页时添加改属性值*//*翻书下一页的动画*/@keyframespage{ 0%{ transform:rotatey(0deg); } 100%{ transform:rotatey(-180deg); z-index:10; } } /*翻书上一页的动画*/@keyframespage1{ 0%{ transform:rotatey(-180deg); z-index:10; } 100%{ transform:rotatey(0deg); } } </style> js部分（js部分主要实现点击上/下一页时，为相应的div添加animation属性）
javascript code
复制内容到剪贴板
<script> varbefore=document.querylector(“#before”); varafter=document.querylector(“#after”); varbook=document.que高考的美好祝愿rylector(“.book”); varpage=document.getelementsbyclassname(“page”);7rotate(); functionrotate(){ varmiddle=0;12for(varz=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=“page1.5slinear1forwards”; middle++; }el{ middle=book.children.length; } }; before.onclick=function(){ if(middle!=0){ page[middle-1].style.animation=“page11.5slinear1forwards”; middle–; }el{ middle=0; } } } </script> 关于最后js部分，主要作用在于，当点击上/下一页时，为相应的div添加animation属性，具体animation的详解，还是需要查看api。
介于兼容性的问题，这里比较好的解决办法是添加class，而不是去添加animation，为适应更多浏览器，需要添加前缀-webkit-、-moz-·······，所以在一个类中写好这些东西，直接添加类就可以了，或者写一个函数，封装好，能直接输出需要的字符串就好。
