Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Image CSS: Links & Buttons: CSS3 demos: Here

Spinning icons using CSS3 transform

Author: Dynamic Drive

An effect that seems to be popping up with increased frequency is the spinning image, or more precisely, icons. Move the mouse over an icon, and it spins (rotates) on its axis to draw attention to itself. This is realized using CSS3's transform: rotate(xdeg) property. Using it you can rotate an element any number of degrees, clockwise or counter clock wise, and whether to do so one or both ways of a state change. Lets see some examples (best viewed in (IE10+, FF3.5+, Chrome/Safari, and Opera 10+):

360 degree spin onMouseover and onMouseout

60 degree spin onMouseover and onMouseout

-360 degree spin onMouseover ONLY

Credits: The social icons used can be obtained here:

A positive degree inside transform: rotate(xdeg) rotates the element clockwise, while negative (ie: -360deg) rotates it counterclockwise instead. To animate this property so the element actually spins into position, also make use of CSS3's transition property. Where the later property is defined affects whether the animation is played both ways or just during the onMouseover state. See the CSS below for all the intricacies.

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 12/28/2011

Revision History: None

Usage Terms: Click here

Your Comments (4)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

So is it necessary to have the browser identified? Could you use transition: all 0.5s ease-in-out
Posted by Christopher Pritchard on 12/29, 12:55 PM
Very nice. I love the images and the spinning is very smooth.
Posted by Cater Bradly on 01/01, 11:05 AM
only second icons spins. rest is static, is it my browser issue or what. anyways thanks
Posted by webbi527 on 01/10, 06:00 AM
Anyone else getting a flicker when the icons are hovered over? The window seems to spontaneously blink on hovering some icons. It may be because I'm using a beta version of Chrome (17), but wondered if anyone else was getting the same.

Otherwise, cool effect and will research into use on my website thanks to your effect, thank you.
Posted by Joseph Shambrook on 01/11, 04:25 AM

Comment Pages 1 of 1 pages

Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.