<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>
旋转的測试代码
參考：