Home / Free Stuff / Scale and rotate with webkit transition on mouse hover

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.