文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS3如何实现3D翻书效果

2024-04-02 19:55

关注

小编给大家分享一下CSS3如何实现3D翻书效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

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

CSS3如何实现3D翻书效果

类似翻书效果,原本的意思是使用JS来控制的,点击一次之后使用setInterval去控制书页翻过去的动画,当书页翻转180°之后,清除掉setInterval,但当我连续点击,那之前没有翻转180°的书页将无法继续完成之前的动作,可以用清除setInterval的方式,但总感觉动画效果不好,当然还有其他解决办法,但突然想到,CSS3为我们提供了animation,我们为什么不去使用使用呢,只要为加上animation动画就可以直接避免这个问题,animation动画默认是每次都执行完动画,所以,当出现连点的时候,就会像图中看到的那样,每一页都自然翻页,下面贴上代码,及实现步骤:
注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写
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.     <!-- 用来控制上一页和下一页操作 -->  

  55.     <input type="button" value="上一页" id="before"/>  

  56.     <input type="button" value="下一页" id="after"/>  

  57. </body>    

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;   

  16.   

  17.             border: 1px solid #666;   

  18.             position: absolute;   

  19.             rightright: 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.         }   

  37.   

  38.   

  39.           

  40.           

  41.         @keyframes page {   

  42.             0%{   

  43.                 transform: rotatey(0deg);   

  44.             }   

  45.             100%{   

  46.                 transform: rotatey(-180deg);   

  47.                 z-index: 10;   

  48.             }   

  49.         }   

  50.           

  51.         @keyframes page1 {   

  52.             0%{   

  53.                 transform: rotatey(-180deg);   

  54.                 z-index: 10;   

  55.             }   

  56.             100%{   

  57.                 transform: rotatey(0deg);   

  58.             }   

  59.         }   

  60.            

  61.     </style>   

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

  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-1].style.animation = "page1 1.5s linear 1 forwards";   

  22.                 middle--;   

  23.         }else{   

  24.             middle = 0;   

  25.             }   

  26.         }   

  27.     }   

  28. </script>   

关于最后JS部分,主要作用在于,当点击上/下一页时,为相应的div添加animation属性,具体animation的详解,还是需要查看API。
介于兼容性的问题,这里比较好的解决办法是添加class,而不是去添加animation,为适应更多浏览器,需要添加前缀-webkit-、-moz-&middot;&middot;&middot;&middot;&middot;&middot;&middot;,所以在一个类中写好这些东西,直接添加类就可以了,或者写一个函数,封装好,能直接输出需要的字符串就好。

看完了这篇文章,相信你对“CSS3如何实现3D翻书效果”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯