Tilt image onclick

HTML

<img id="cat" onclick="rotate(this)" src="http://placekitten.com/300/300"/>

CSS

.rotate{
-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);    
}
.rotate1{
-webkit-transform: rotate(180deg); 
-moz-transform: rotate(180deg); 
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);    
}
.rotate2{
-webkit-transform: rotate(270deg); 
-moz-transform: rotate(270deg); 
-o-transform: rotate(2700deg);
-ms-transform: rotate(2700deg);    
}
.rotate3{
-webkit-transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);    
}

JavaScript

var rot = 0;
function rotate(e){
    if(rot===0){
   e.className="rotate"; 
    rot++;
    }
    else if(rot===1){
   e.className="rotate1"; 
    rot++;
    }
    else if(rot===2){
   e.className="rotate2"; 
    rot++;
    }
    else if(rot===3){
   e.className="rotate3"; 
    rot=0;
    }
}