.home-section:hover img{
-webkit-transform: rotate(315deg) scale(0.5);
-moz-transform: rotate(315deg) scale(0.5);
-o-transform: rotate(315deg) scale(0.5);
-ms-transform:scale(0.5,0.5) rotate(315deg) ; /* the order is important */
transform: rotate(315deg) scale(0.5); /* future standard */
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-ms-transition: all 1s ease-in; /* future IE 10 */
transition: all 1s ease-in; /* future standard */
}
.home-section img{
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out; /* future IE 10 */
transition: all 2s ease-in-out; /* future standard */
}
For IE 9:
<!--[if lte IE 9]> <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script type="text/javascript" src="jquery-css-transform.js"></script>
<script type="text/javascript" src="jquery-animate-css-rotate-scale.js">
</script>
<script type="text/javascript">
$().ready(function() {
$('.home-section').hover(function () {
$(this).find('img').animate({rotate: '+=315deg', scale: '-=0.5'}, 1000);
},function () {
$(this).find('img').animate({rotate: '-=315deg', scale: '+=0.5'}, 2000);
});
});
</script>
<![endif]-->
Where to find jquery-animate-css-rotate-scale.js :http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html Thanks Zach!
More on CSS3 Transitions and transformations:
http://msdn.microsoft.com/en-us/library/ff974936%28v=vs.85%29.aspx
http://css3please.com/
