JavaScript中transform实现数字翻页效果

时间：2021-05-26

效果图：

图（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>&nbsp; <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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章