先上效果图：（样式有点丑，可以忽略一下下，效果出来了就好，后期加到其他项目中方便更改0.0）
类似翻书效果，原本的意思是使用JS来控制的，点击一次之后使用setInterval去控制书页翻过去的动画，当书页翻转180°之后，清除掉setInterval，但当我连续点击，那之前没有翻转180°的书页将无法继续完成之前的动作，可以用清除setInterval的方式，但总感觉动画效果不好，当然还有其他解决办法，但突然想到，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> <> <inputtype="button"value="上一页"id="before"/> <inputtype="button"value="下一页"id="after"/> </body>
CSS部分：（通过改变transform中rotatey的值，来实现书页的翻转效果）
CSS Code复制内容到剪贴板 <style> .book{ width:460px; height:300px; position:relative; margin:150px400px; -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:1pxsolid#666; position:absolute; rightright:0; transform-origin:left; transform-style:preserve-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中有reverse，可以反向执行动画， 使用时需要在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.querySelector("#before"); varafter=document.querySelector("#after"); varbook=document.querySelector(".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++; }else{ middle=book.children.length; } }; before.onclick=function(){ if(middle!=0){ page[middle-1].style.animation="page11.5slinear1forwards"; middle--; }else{ middle=0; } } } </script>
关于最后JS部分，主要作用在于，当点击上/下一页时，为相应的div添加animation属性，具体animation的详解，还是需要查看API。
介于兼容性的问题，这里比较好的解决办法是添加class，而不是去添加animation，为适应更多浏览器，需要添加前缀-webkit-、-moz-·······，所以在一个类中写好这些东西，直接添加类就可以了，或者写一个函数，封装好，能直接输出需要的字符串就好。
【CSS3实现3D翻书效果】相关文章：