Transitions and transformations with css3 and jquery fallback for ie

.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/