Scale and rotate with webkit transition on mouse hover

This will works only for modern browsers such as Chrome(1.0), Firefox (4.0), Internet Explorer(10), Opera(10.5), Safari (3.2); It will not work for non-webkit browsers, means no scale and rotate effect is seen.

The example for the scale and rotate is here:
HTML

<div id="container">
<div id="selector" class="chkani">
<img src="player_play.png" />
</div>
</div>

 

now the CSS codes:

#selector{
position: relative;
left: 250px;
top: 100px;
width: 100px;
height: 64px;
border: 1px solid #ff6600;
}
.chkani{
-moz-transition: -moz-transform .2s ease-in-out;
-webkit-transition: -webkit-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
-ms-transition: -ms-transform .2s ease-in-out;
}
.chkani:hover{
-moz-transform: rotate(30deg) scale(1.1);
-webkit-transform: rotate(30deg) scale(1.1);
-o-transform: rotate(30deg) scale(1.1);
-ms-transform: rotate(30deg) scale(1.1);
}

 

As you see in the above example i use some prefix like -webkit-, -moz-, -ms- and -o- all this prefixes works for different browsers as we discussed about on the starting of the tutorial. Hope you enjoy with this post.