Few lines of CSS3 code is used to create a cool rotate / animate a image when a user mouseover it. I have used transition css3 code to made that effect.

CSS3 Image Rotate

Image Rotate / Animate using CSS3 (360 deg, 180 deg)

CSS3 Code


img {
 -webkit-transition: all 0.5s ease 0s;
 -moz-transition: all 0.5s ease 0s;
 -o-transition: all 0.5s ease 0s;
 -ms-transition: all 0.5s ease 0s;
 transition: all 0.5s ease 0s;
 cursor:pointer;
 }

 img:hover {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
 }

We can customize the code inorder to rotate / animate image to 180 degree, 90 degree etc.

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/11/css3-image-rotate1.pnghttp://w3lessons.info/wp-content/uploads/2012/11/css3-image-rotate1-150x150.pngKarthikeyan KCSS3CSS3,Design,new techniques,tips & tricks
Few lines of CSS3 code is used to create a cool rotate / animate a image when a user mouseover it. I have used transition css3 code to made that effect.CSS3 CodeWe can customize the code inorder to rotate / animate image to 180 degree, 90 degree etc.Please don’t...