<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style type="text/css"></style> <style type="text/css"> #my3D{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; } #mycard{ width: 400px; height: 400px; margin: 0 auto; -webkit-transform-style:perspective-3d; overflow: hidden; } .page{ width: 360px; height: 360px; padding: 20px; background-color: rgb(0,0,0); color: rgb(255,255,255); font-size: 360px; font-weight: bold; text-align: center; } #num1{ -webkit-transform-origin: bottom; -webkit-transition: -webkit-transform 1s linear; } #num2,#num3,#num4,#num5,#num6{ -webkit-transform-origin:bottom; -webkit-transition: -webkit-transform 1s linear; -webkit-transform:rotateX(90deg); } .control{ margin: 40px auto; text-align: center; } </style></head><body> <div id="my3D"> <div id="mycard"> <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 class="control"> <input type="button" onclick="next()" value="next" /> <a href="" id="next1" onclick="next()">next</a> <a href="" id="previous" onclick="previous()">previous</a> </div> <script type="text/javascript"> var i = 1; function next(){ if (i==6) { return; } var showcard = document.getElementById("page"+i); showcard.style.webkitTransForm = "rotateX(-90deg)"; i++; var nextcard = document.getElementById("page"+i); nextcard.style.webkitTransForm = "rotateX(0deg)"; } function previous(){ if(i==1){ return; } var showcard = document.getElementById("page"+i); showcard.style.webkitTransForm = "rotateX(90deg)"; i--; var lastcard = document.getElementById("page"+i); nextcard.style.webkitTransForm = "rotateX(0deg)"; } var btn = document.getElementById("next1"); btn.onclick = next(); </script></body></html>
誰能告訴我為啥執行不了，瀏覽器也不報錯
江城fen
2016-03-13 19:58:59
