CSS3 3D制作实战案例分析(3)
<input id="btn4" type="button" name="" value="向下翻转90度" /> </div> <script type="text/javascript" src=""></script> <script> var x=0; var y=0; var box=$("#box"); $('#btn1').on("click",function(){ var value=90+x*90; box.css("-webkit-transform","rotateX("+value+"deg)"); x++; }); $('#btn2').on("click",function(){ var value=y*90+90; box.css("-webkit-transform","rotateY("+value+"deg)"); y++; }); $('#btn3').on("click",function(){ y--; var value=y*90; box.css("-webkit-transform","rotateX("+value+"deg)");
}); $('#btn4').on("click",function(){ x--; var value=x*90; box.css("-webkit-transform","rotateX("+value+"deg)");
}); </script> </body> </html>
(编辑:ASP站长网) |