Make your site logo interactive with css3

Using css3 and Html5, logo of your site can be made interactive. Add following css3 code to your your css file . This code will make logo image rotate by 10 degree whenever mover is hovered over logo image. If ID of your logo is “logo” then code will be :

#logo img
 {
 -webkit-transition-property: -webkit-transform;

-moz-transition-property: -moz-transform;

-o-transition-property: -o-transform;

transition-property: transform;

-webkit-transition-duration: 0.9s;

-moz-transition-duration: 0.9s;

-o-transition-duration: 0.9s;

transition-duration: 0.9s;

overflow:hidden;

}

#logo img:hover
 {
 -webkit-transform:rotate(10deg);

-moz-transform:rotate(10deg);

-o-transform:rotate(10deg);
 }