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.

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.