Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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:


Code Info

Rate this code:

Date Posted: 12/28/2011

Revision History: None

Usage Terms: Click here

Copyright 2006-2016 Dynamic Drive