jQuery example of rotate transform

fun rotate transform with percentage scaling

by Ben Clayton

HTML

<div class="spin"></div>

CSS

.spin {
        position:absolute;
        left:250px;
        top:100px;
        width:200px;
        height:200px;
}


.spin div {
    margin:0px 0px;
    padding:0;
	background-color:#222222;
    border:1px solid #8F60C0 
}
.spin div {
    width: 98%;
	height: 98%;
    position:absolute;
}
.spin .sel {border:2px solid red}

.spin div {
    -webkit-transform: rotate(10deg);
	   -moz-transform: rotate(10deg);
	     -o-transform: rotate(10deg);
	        transform: rotate(10deg);
}

JavaScript

function rec (obj,n,r,g,b){
       
       var d=document.createElement('div');
       obj.append(d);
       obj.css("background-color","#"+r.toString(16)+g.toString(16)+b.toString(16));
       //obj.css("left",10);
       if(n<50){
           rec($(d),n+1,r+5,g,b+3);
       }
   }
   rec($(".spin"),1,100,100,22);
$('div').on('mouseover',function(){
    $(this).addClass("sel");
});
$('div').on('mouseout',function(){
    $(this).removeClass("sel");
});