栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

CSS3实现3D翻书效果

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

XML/HTML Code复制内容到剪贴板
  1.   
  2.       
  3.       
  4.           
  5.             1  
  6.             2  
  7.         
  
  •           
  •             3  
  •             4  
  •         
  •   
  •   
  •           
  •             5  
  •             6  
  •         
  •   
  •   
  •           
  •             7  
  •             8  
  •         
  •   
  •   
  •           
  •             9  
  •             10  
  •           
  •   
  •           
  •             11  
  •             12  
  •           
  •   
  •           
  •             13  
  •             14  
  •           
  •   
  •           
  •             15  
  •             16  
  •           
  •   
  •           
  •             17  
  •             18  
  •           
  •   
  •           
  •             19  
  •             20  
  •           
  •       
  •   
  •       
  •       
  •       
  •     
  • CSS部分:(通过改变transform中rotatey的值,来实现书页的翻转效果)

    CSS Code复制内容到剪贴板
    1.   
    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.        

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

    Javascript Code复制内容到剪贴板
    1.   

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

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/215835.html

    CSS教程相关栏目本月热门文章

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号