CSS3完成三d翻书实际效果

日期：2021-03-03 类型：科技新闻 

关键词：如何制作微信小程序，微信小程序源码，小程序码生成，凡科网微信小程序，微信公众号小程序

先上实际效果图：（款式有点丑，能够忽视1下下，实际效果出来了就好，后期加到别的新项目中便捷变更0.0）

相近翻书实际效果，本来的意思是应用JS来操纵的，点一下1次以后应用setInterval去操纵书册越过去的动漫，当书册旋转180°以后，消除掉setInterval，但当我持续点一下，那以前沒有旋转180°的书册将没法再次进行以前的姿势，能够用消除setInterval的方法，但总觉得动漫实际效果不太好，自然也有别的处理方法，但忽然想起，CSS3为大家出示了animation，大家为何不去应用应用呢，要是为再加animation动漫便可以立即防止这个难题，animation动漫默认设置是每次都实行完动漫，因此，当出現连点的情况下，就会像图中看到的那样，每页都当然换页，下面贴上编码，及完成流程：
注：本案例JS一部分均以原生态JS撰写，不当用原生态JS的，能用jQuery等对3方架构改变
html一部分：（这一部分真心实意·····，算了吧，丑就丑点吧~.~）

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.     <!-- 所展现的书的內容 -->  
  3.     <div class="book">  
  4.         <div class="page">  
  5.             <span>1</span>  
  6.             <span>2</span>  
  7.         </div>  
  8.         <div class="page">  
  9.             <span>3</span>  
  10.             <span>4</span>  
  11.         </div>  
  12.   
  13.         <div class="page">  
  14.             <span>5</span>  
  15.             <span>6</span>  
  16.         </div>  
  17.   
  18.         <div class="page">  
  19.             <span>7</span>  
  20.             <span>8</span>  
  21.         </div>  
  22.   
  23.         <div class="page">  
  24.             <span>9</span>  
  25.             <span>10</span>  
  26.         </div>  
  27.   
  28.         <div class="page">  
  29.             <span>11</span>  
  30.             <span>12</span>  
  31.         </div>  
  32.   
  33.         <div class="page">  
  34.             <span>13</span>  
  35.             <span>14</span>  
  36.         </div>  
  37.   
  38.         <div class="page">  
  39.             <span>15</span>  
  40.             <span>16</span>  
  41.         </div>  
  42.   
  43.         <div class="page">  
  44.             <span>17</span>  
  45.             <span>18</span>  
  46.         </div>  
  47.   
  48.         <div class="page">  
  49.             <span>19</span>  
  50.             <span>20</span>  
  51.         </div>  
  52.     </div>  
  53.   
  54.     <!-- 用来操纵上1页和下1页实际操作 -->  
  55.     <input type="button" value="上1页" id="before"/>  
  56.     <input type="button" value="下1页" id="after"/>  
  57. </body>    

CSS一部分：（根据更改transform中rotatey的值，来完成书册的旋转实际效果）

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.         .book{   
  3.             width: 460px;   
  4.             height: 300px;   
  5.             position: relative;   
  6.             margin: 150px 400px;   
  7.             -webkit-transform-style: preserve⑶d;   
  8.             -moz-transform-style: preserve⑶d;   
  9.             -ms-transform-style: preserve⑶d;   
  10.             transform-style: preserve⑶d;   
  11.             transform: rotatex(30deg);   
  12.         }   
  13.         .page{   
  14.             width: 230px;   
  15.             height: 300px;   
  16.   
  17.             border: 1px solid #666;   
  18.             position: absolute;   
  19.             rightright: 0;   
  20.             transform-origin: left;   
  21.             transform-style: preserve⑶d;   
  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(⑴80deg);   
  35.             backface-visibility:hidden;   
  36.         }   
  37.   
  38.   
  39.         /*下列两个动漫能够只应用第1个，animation中有reverse，能够反方向实行动漫，  
  40.             应用时必须在JS中点一下上1页时加上改特性值*/  
  41.         /*翻书下1页的动漫*/  
  42.         @keyframes page {   
  43.             0%{   
  44.                 transform: rotatey(0deg);   
  45.             }   
  46.             100%{   
  47.                 transform: rotatey(⑴80deg);   
  48.                 z-index: 10;   
  49.             }   
  50.         }   
  51.         /*翻书上1页的动漫*/  
  52.         @keyframes page1 {   
  53.             0%{   
  54.                 transform: rotatey(⑴80deg);   
  55.                 z-index: 10;   
  56.             }   
  57.             100%{   
  58.                 transform: rotatey(0deg);   
  59.             }   
  60.         }   
  61.            
  62.     </style>   

JS一部分（JS一部分关键完成点一下上/下1页时，为相应的div加上animation特性）

JavaScript Code拷贝內容到剪贴板
  1. <script>   
  2.     var before = document.querySelector("#before");   
  3.     var after = document.querySelector("#after");   
  4.     var book = document.querySelector(".book");   
  5.     var page = document.getElementsByClassName("page"); 7     rotate();   
  6.   
  7.     function rotate(){   
  8.         var middle = 0;12         for(var z=0;z<book.children.length;z++){   
  9.             page[z].style.zIndex = book.children.length-z;   
  10.         }   
  11.         after.onclick = function(){   
  12.             if(middle != book.children.length){   
  13.                 page[middle].style.animation = "page 1.5s linear 1 forwards";   
  14.                 middle++;   
  15.             }else{   
  16.                 middle = book.children.length;   
  17.             }   
  18.         };   
  19.         before.onclick = function(){   
  20.             if(middle != 0){   
  21.                 page[middle⑴].style.animation = "page1 1.5s linear 1 forwards";   
  22.                 middle--;   
  23.         }else{   
  24.             middle = 0;   
  25.             }   
  26.         }   
  27.     }   
  28. </script>   

有关最终JS一部分，关键功效在于，当点一下上/下1页时，为相应的div加上animation特性，实际animation的详解，還是必须查询API。
 
介于适配性的难题，这里较为好的处理方法是加上class，而并不是去加上animation，为融入更多访问器，必须加上前缀-webkit-、-moz-·······，因此在1个类中写好这些物品，立即加上类便可以了，或写1个涵数，封裝好，能立即輸出必须的标识符串就好。

上一篇：CSS应用float特性设定波动元素的案例实例教程 返回下一篇：没有了