<!DOCTYPE html><html><head> <title>練習</title> <style type="text/css"> #box{perspective: 500; perspective-origin: 50% 50%; transform-style: preserve-3d; width: 500px; height: 500px;} .page{text-align: center; font-size: 100px; height: 300px; width: 300px; line-height: 300px; margin: 100px; position: absolute; transition: transform 2s; background: #ccc; transform-origin: bottom;} #page6,#page2,#page3,#page4,#page5{ transform: rotateX(90deg); } </style> </head><body><div id="box"> <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 id="btn"> <button id="pre">pre</button> <button id="next">next</button></div><script type="text/javascript"> var next=document.getElementById('next'); var curIndex=1; next.onclick=function(){ if (curIndex==6) {return;} var curPage=document.getElementById('page'+curIndex); curPage.style.transform="rotateX(-90deg)"; curIndex++; var curPage=document.getElementById('page'+curIndex); curPage.style.transform="rotateX(0)"; } pre.onclick=function(){ if (curIndex==1) {return;} var curPage=document.getElementById('page'+curIndex); curPage.style.transform="rotateX(-90deg)"; curIndex--; var curPage=document.getElementById('page'+curIndex); curPage.style.transform="rotateX(0)"; } </script></body></html>
- 2 回答
- 0 關注
- 1314 瀏覽
添加回答
舉報
0/150
提交
取消