基于CSS3新属性Animation及transform实现类似翻书效果 - 笛声如诉人影茫_H5之家

注：本实例JS部分均以原生JS编写，不善用原生JS的，可用jQuery等对三方框架改写

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

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

html部分：（这部分真心·····，算了，丑就丑点吧~.~）

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

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; : 1px solid #666; 18 position: absolute; 19 right: 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 } 以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画， { 43 0%{ 44 transform: rotatey(0deg); 45 } 46 100%{ 47 transform: rotatey(-180deg); 48 z-index: 10; 49 } 50 } { 53 0%{ 54 transform: rotatey(-180deg); 55 z-index: 10; 56 } 57 100%{ 58 transform: rotatey(0deg); 59 } 60 }

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

1 <script> 2 var before = document.querySelector("#before"); 3 var after = document.querySelector("#after"); 4 var book = document.querySelector(".book"); rotate(); rotate(){ (var z=0;z<book.children.length;z++){ 13 page[z].style.zIndex = book.children.length-z; 14 } 15 after.onclick = function(){ 16 if(middle != book.children.length){ 17 page[middle].style.animation = "page 1.5s linear 1 forwards"; 18 middle++; 19 }else{ 20 middle = book.children.length; 21 } 22 }; 23 before.onclick = function(){ 24 if(middle != 0){ 25 page[middle-1].style.animation = "page1 1.5s linear 1 forwards"; 26 middle--; 27 }else{ 28 middle = 0; 29 } 30 } 31 } 32 </script>

关于最后JS部分，主要作用在于，当点击上/下一页时，为相应的div添加animation属性，具体animation的详解，还是需要查看API。