189 8069 5689

CSS3如何实现3D翻书效果

小编给大家分享一下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.   

  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的值,来实现书页的翻转效果)

    1.   

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

    1.   

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

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


    当前文章:CSS3如何实现3D翻书效果
    网址分享:http://cdxtjz.cn/article/gcojgc.html

    其他资讯