DIV旋转的測试代码
<html> <head> <style type="text/css"> .rat0 { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); } .rat1 { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); } .rat2 { -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); } .rat3 { -webkit-transform: rotate(-50deg); -moz-transform: rotate(-50deg); } .rat4 { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); } </style> <script type="text/javascript" src="jquery-2.1.1.min.js"></script> </head> <body> <script type="text/javascript"> var base_len = 100; var len = 700; function drawleaf(rat) { var hdiv = "<div class='rat" + rat + "'><img src='leaf.png'></div>"; $("#content").append(hdiv); } $(document).ready(function(){ //$("#content").append(hdiv); for(var i=0; i<10; i++) { drawleaf( Math.floor(Math.random() * ( 4 + 1)) ); } }); </script> <div id="content" width="960" height="800"> </div> </body> </html>
旋转的測试代码
參考: