这篇文章主要为大家展示了“JavaScript中transform如何实现数字翻页效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中transform如何实现数字翻页效果”这篇文章吧。
效果图:
图(1)初始图
图(2)翻页过程
图(3)翻页结果
代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition</title> <style> #container{ width:500px; height:500px; margin:20px auto; background:#ff0000; -webkit-transiton:background 2s linear,width 2s,height 2s; -moz-transition:background 2s,width 2s,height 2s; -o-transition:background 2s,width 2s,height 2s; -ms-transition:background 2s,width 2s,height 2s; transition:background 2s,width 2s,height 2s; } #container:hover{ background: #00ff00;width:200px;height: 200px;} #my3dspace{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; overflow: hidden; } #pagegroup{ width: 400px; height: 400px; margin: 0 auto; -webkit-transform-style:preserve-3d; position: relative; } .page{ width: 360px; height: 360px; padding: 20px; background-color: black; color: white; font-size: 360px; font-weight: blod; line-height: 360px; text-align: center; position: absolute; } #page1{ -webkit-transform-origin:top; transform-origin:top; -webkit-transition:-webkit-transform 1s linear; transition:transform 1s linear; } #page2,#page3,#page4,#page5,#page6{ -webkit-transform-origin:top; transform-origin:top; -webkit-transition:-webkit-transform 1s linear; transition:transform 1s linear; -webkit-transform:rotateX(-90deg); transform:rotateX(-90deg); } #op{ text-align: center; margin: 40px auto; } </style> </head> <body> <div id="my3dspace"> <div id="pagegroup"> <div class="page" id="page1">1</div> <div class="page" id="page2">2</div> <div class="page" id="page3">3</div> <div class="page" id="page4">4</div> <div class="page" id="page5">5</div> <div class="page" id="page6">6</div> </div> </div> <div id="op"> <a href="javascript:next()" rel="external nofollow" >next</a> <a href="javascript:prev()" rel="external nofollow" >prev</a> </div> <script type="text/javascript"> var curIndex = 1; function next(){ if(curIndex==6) return; var curPage = document.getElementById("page"+curIndex); curPage.style.webkitTransform = "rotateX(90deg)"; curPage.style.transform = "rotateX(90deg)"; curIndex ++; var nextPage = document.getElementById("page"+curIndex); nextPage.style.webkitTransform="rotateX(0deg)"; nextPage.style.transform="rotateX(0deg)"; } function prev(){ if(curIndex==1) return; var curPage =document.getElementById("page"+curIndex); curPage.style.webkitTransform="rotateX(-90deg)"; curPage.style.transform="rotateX(-90deg)"; curIndex --; var prevPage = document.getElementById("page"+curIndex); prevPage.style.webkitTransform="rotateX(0deg)"; prevPage.style.transform="rotateX(0deg)"; } </script> </body> </html>
以上是“JavaScript中transform如何实现数字翻页效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。