<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> #my3dspace{ -webkit-perspective:800px; -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:black; color:white; font-size:360px; font-family:bold; 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:0 auto; }</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)"; } 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="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()">next</a> <a href="javascript:prev()">prove</a></div></body></html>
添加回答
举报
0/150
提交
取消