首页 > 代码库 > 3D动画
3D动画
点击查看Demo：
<!doctype html><html><head><meta charset="utf-8"><title>3D动画效果</title><style>#w3dspace{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; overflow:hidden;}#pagegroup{ width:400px; height:400px; margin:0 auto; -webkit-transform-style:preserve-3d;}.page{ width:360px; height:360px; padding:20px; background-color:#000; color:white; font-weight:bold; font-size:360px; line-height:360px; text-align:center; position:absolute;}#page1{ -webkit-transform-origin:bottom; -webkit-transition:-webkit-transform 1s linear;}#page2,#page3,#page4,#page5,#page6{ -webkit-transform-origin:bottom; -webkit-transition:-webkit-transform 1s linear; -webkit-transform:rotateX(90deg);}#op{ text-align:center; /*margin:40px auto;*/ position:absolute;}#op a{ cursor:pointer; }</style><script type="text/javascript"> var curIndex = 1; function next(){ if(curIndex==6) return; var curPage = document.getElementById("page"+curIndex); curPage.style.webkitTransform = "rotateX(-90deg)"; curIndex ++; var nextPage = document.getElementById("page"+curIndex); nextPage.style.webkitTransform = "rotateX(0deg)"; console.log(curIndex); } function prev(){ if(curIndex==1) return; var curPage = document.getElementById("page"+curIndex); curPage.style.webkitTransform = "rotateX(90deg)"; curIndex --; var prevPage = document.getElementById("page"+curIndex); prevPage.style.webkitTransform = "rotateX(0deg)"; } </script></head><body> <div id="w3dspace"> <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 id="a1" onClick="next()">next</a> <a id="a2" onClick="prev()">prev</a> </div></body></html>
3D动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。