Rotate image on hover using CSS3

Rotate image on image hover using CSS3. now in CSS3 we have more flexible feature to make more animations and more design by using CSS coding. similarly here we are going to see how to make animated rotating image on image hover by using CSS transform code. by using this transform we can rotate the image. and also we are going see make delay transition for make the operation slow, by using ease-out. let see the details about the css rotation on hover.

DOWNLOAD               LIVE DEMO

like the above image, while hover the image the image get rotate, here we are using only CSS3. let see the coding for that.

CODE FOR IMAGE

<img src="2my4edge-logo.png" class="img" />

as like the above, just call image by using img tag with src for location. and make class or id for individual rotation.

CSS FOR TRANSITION

.img { 
-webkit-transition: all .9s ease-out;
-moz-transition: all .9s ease-out;
-ms-transition: all .9s ease-out;
-o-transition: all .9s ease-out;
transition: all .9s ease-out;
}

the above code is for make transition. .9s is for make delay, you can change it as your wish.

CSS FOR TRANSFORM

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

the above code is for rotate the image for 360deg. it is on while image hover.

RELATED POSTS:

Change text & background color while selecting text using CSS3

Change the colored image into black and white image on image hover

Facebook Style Textarea Auto Grow Using JQuery Plugin and Css

Change background image while page refresh using Javascript

My Demos page design details with all my tutorials