<!doctype html><html><head><meta charset="utf-8"><title>無標(biāo)題文檔</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>
老師，請(qǐng)問我的代碼哪里有錯(cuò)，為什么點(diǎn)擊沒反應(yīng)
qq_遺忘的激情_0
2015-11-10 15:34:54
