Make Images Spin Using a Bit of CSS

Sometimes just a little WOW makes a big difference.

Ever since we launched the Web Designer’s Academy, people have been asking about that fancy red spinning nametag in the sidebar.

See it over there?

Move your mouse over it.

It spins!

Cool, right?

It’s a simple css effect that adds just a little something interesting to a page.

It’s useful for those clients that want something to “pop”, or they want a little “wow” added to their site.  This is it.

I also got a new drawing pen for my iPad, so I’m going to use this opportunity to show you my drawing skillz. Yeah, I said it… skillz.

Image Spin CSS Tutorial

Awesome right?

Best of all, it’s pretty easy to do.

Here’s how it works.


STEP 1 – Add some CSS to your theme

The first step is to add the following CSS to your themes CSS section.  If you are using DWB, go to Genesis > Dynamik Custom > CSS and paste in this CSS.

/* START ROTATE STYLES */

#rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}

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

/* END ROTATE STYLES */

and Save your changes.


STEP 2 – Wrap an image in that div class

Now that your CSS has been added, now find the spot you want to add your spinny image (this works in a page / post / widget, etc…) and paste in this HTML:

<div id=”rotator”><img class=”alignnone” src=”http://www.webdesignersacademy.com/wp-content/uploads/spin-me.png“/></div>

Now, just replace the image source URL (the red part) and you are ready to get yer’ spin on.

Before you go, here are two points you should keep in mind:

  1. Use a transparent PNG file so text/background will be able to be seen behind the image when it spins.
  2. Don’t overdo it!  One or two things here and there are ok.  Don’t make everything spin.

Your friend,
Ian “so-glad-i’m-not-an-artist-cuz-i’d-be-poor” Anderson

Special thanks to Brett for the post idea!