这篇文章主要介绍了css3实现3d翻书效果，基于css3新属性animation及transform实现类似翻书效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
先上效果图：（样式有点丑，可以忽略一下下，效果出来了就好，后期加到其他项目中方便更改0.0）
类似翻书效果，原本的意思是使用JS来控制的，点击一次之后使用setInterval去控制书页翻过去的动画，当书页翻转180°之后，清除掉setInterval，但当我连续点击，那之前没有翻转180°的书页将无法继续完成之前的动作，可以用清除setInterval的方式，但总感觉动画效果不好，当然还有其他解决办法，但突然想到，CSS3为我们提供了animation，我们为什么不去使用使用呢，只要为加上animation动画就可以直接避免这个问题，animation动画默认是每次都执行完动画，所以，当出现连点的时候，就会像图中看到的那样，每一页都自然翻页，下面贴上代码，及实现步骤：
注：本实例JS部分均以原生JS编写，不善用原生JS的，可用jQuery等对三方框架改写
html部分：（这部分真心·····，算了，丑就丑点吧~.~）
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
17 18
19 20
CSS部分：（通过改变transform中rotatey的值，来实现书页的翻转效果）
立即学习“前端免费学习笔记（深入）”；
.book{ width: 460px; height: 300px; position: relative; margin: 150px 400px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; transform: rotatex(30deg); } .page{ width: 230px; height: 300px; border: 1px solid #666; position: absolute; rightright: 0; transform-origin: left; transform-style: preserve-3d; backface-visibility:hidden; font-size: 60px; text-align: center; line-height: 300px; } .page span{ display: block; width: 100%; position: absolute; background-color: #00FFFF; } .page span:nth-child(2){ transform: rotatey(-180deg); backface-visibility:hidden; } /*以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画， 使用时需要在JS中点击上一页时添加改属性值*/ /*翻书下一页的动画*/ @keyframes page { 0%{ transform: rotatey(0deg); } 100%{ transform: rotatey(-180deg); z-index: 10; } } /*翻书上一页的动画*/ @keyframes page1 { 0%{ transform: rotatey(-180deg); z-index: 10; } 100%{ transform: rotatey(0deg); } }
JS部分（JS部分主要实现点击上/下一页时，为相应的p添加animation属性）
var before = document.querySelector("#before"); var after = document.querySelector("#after"); var book = document.querySelector(".book"); var page = document.getElementsByClassName("page"); 7 rotate(); function rotate(){ var middle = 0;12 for(var z=0;z<book.children.length;z++){ page[z].style.zIndex = book.children.length-z; } after.onclick = function(){ if(middle != book.children.length){ page[middle].style.animation = "page 1.5s linear 1 forwards"; middle++; }else{ middle = book.children.length; } }; before.onclick = function(){ if(middle != 0){ page[middle-1].style.animation = "page1 1.5s linear 1 forwards"; middle--; }else{ middle = 0; } } }
关于最后JS部分，主要作用在于，当点击上/下一页时，为相应的p添加animation属性，具体animation的详解，还是需要查看API。
介于兼容性的问题，这里比较好的解决办法是添加class，而不是去添加animation，为适应更多浏览器，需要添加前缀-webkit-、-moz-·······，所以在一个类中写好这些东西，直接添加类就可以了，或者写一个函数，封装好，能直接输出需要的字符串就好。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
js和CSS3实现卡牌旋转切换效果
CSS3 3D旋转rotate效果的使用介绍
以上就是如何利用CSS3实现3D翻书效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610520.html
微信扫一扫 
支付宝扫一扫 
