Rotate image 360deg when mouse hover using Css3

Posted by Yuga irgi on Friday, May 09, 2014 in Blogging Tips, CSS3 | No comments

css3

Here's what you're gonna do NOW - hover your mouse on the image to the left. Awesome, right!? This tutorial will teach you how to add this rotating effect to your website/blog's images. After implementing it, whenever somebody will hover their mouse cursor on the image, it will rotate 360 degrees (you can choose how much to rotate) and when the mouse cursor is taken away, the image will reverse-rotate and come back to its original position!

Add the rotating effect code:

Add the following CSS code in your website/blog:

.rotate img {
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.rotate img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Where to add this code? 

If you are not that familiar with CSS and HTML, you'll be confused as to where to paste the above code. Follow these tips:

• If you are a Blogger user, go to your blogger dashboard >> Template >> Edit HTML >> and paste the code directly above/before ]]></b:skin> 
• If you have a website, you can paste the code inside style tags like this:

<style>
Paste the CSS code here!
</style>

Some Pro Tips:

• To change the time taken by the image to rotate, change 0.6 (highlighted in blue) to whatever value you want (bigger the value, slower the transition). Experiment with various values until you get what you want.
• You can also choose the degree up to which the image will rotate. Simply change 360 (highlighted in pink) with whatever degree you want.

Activate the code on images:

Okay, now that you have added the CSS code, you're good to go. The good thing is that you have complete freedom as to which images will rotate and which images will not.

Suppose you want a particular image to have this hover effect, simply add the class rotate to the image code, like this:

<a class="rotate" href="image_url"><img src="image_url"/></a>

You can also wrap the <img> tag in div tags with class="rotate", like this:

<div class="rotate">
<img src="image_url"/>
</div>

You're done! Once you have added the rotate class, whenever someone hovers on the image, the CSS code (that we added earlier) will automatically take action and your image will rotate!


Since maximum number of Techsperia readers are Blogger users, I figured I'll also tell you how to specifically add the rotate class to images in Blogger posts:

Suppose you added an image while writing a blog post, switch to the HTML mode >> find your image code, it will be wrapped in a <div> tag like this:

<div class="seperator" something something>
<a href something something><img src="blah blah"/></a>
</div>

Replace seperator with rotate. Here's a screenshot to explain you better (btw, the screenshot is of this post itself!)

About The Author