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.