Create Spinning, Fading Icons with CSS3 and MooTools

By  on  

A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I didn't want to abandon CSS animations completely though;  I added a bit of MooTools to randomize the icon's initial display position and rotation.  Let me show you how to use CSS3 and MooTools to create dymanic, rotating elements.


We'll use the standard, accessible, SEO-friendly HTML for link creation:

<div id="followIcons">
	<a href="" rel="nofollow" id="iconRSS">RSS Feed</a>
	<a href="" rel="nofollow" id="iconTwitter">@davidwalshblog Twitter</a>
	<a href="" rel="nofollow" id="iconGitHub">@davidwalshblog Twitter</a>
	<a href="" rel="nofollow" id="iconDelicious">dwizzlestar</a>
	<a href="" rel="nofollow" id="iconFacebook">David Walsh Facebook</a>
	<a href="" rel="nofollow" id="iconLinkedIn">David Walsh LinkedIn</a>
	<a href="skype:davidwalsh83?chat" id="iconSkype">David Walsh Skype</a>
	<a href="mailto:[email protected]" id="iconMail">David Walsh Email</a>
	<a href="" rel="nofollow" id="iconForge">David Walsh MooTools Forge</a>

CSS will make these links pretty.


The first part of the process is using standard CSS to move the text off screen and instead use the icons as background images for the link:

#followIcons a	{ 
	background-position:0 0; 

Once we've done that time-tested practice, it's time to put a few initial CSS3 settings into place.  As you probably know, at this point all CSS transform properties are browser-specific, so our CSS will get a bit lengthy:

#followIcons a	{ 
	transition-duration: 0.8s;
	transition-property: transform;

The transition duration will be 0.8 seconds and transition property will be a basic transform.  You can change the transform duration to any duration you'd like.  Too fast or too slow will ruin the effect (that's what she said).

The MooTools JavaScript

The first part is randomly positioning each node/icon within the container.  It's important to know the container's width and height, then subtract the icon width and height from that to know the true area you can fit the icon into.  Nothing would be more lame than a piece of the icon hidden. The next step of the process is adding mouseenter and mouseleave events to make the images rotate and fade in during each respective event.

// "Globals" - Will make things compress mo-betta
var $random = function(x) { return Math.random() * x; };
var availableWidth = 200, availableHeight = 40;

// Find the appropriate prefix icon
var cssPrefix = false;
switch( {
	case "safari":
		cssPrefix = "webkit";
	case "chrome":
		cssPrefix = "webkit";
	case "firefox":
		cssPrefix = "moz";
	case "opera":
		cssPrefix = "o";
	case "ie":
		cssPrefix = "ms";

// The Icons
var icons = $$("#followIcons a");
// Apply opacity
var zIndex = 1000;

// Randomize each link
icons.each(function(element,index) {
	// Generate the random rotation amount
	var startDeg = $random(360);
	// Place the image at the default rotation and opacity
	var resetPlace = function() {
		element.fade(0.6).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
	// Randomly position the element
	element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);
	// Rotate the image initially
	// Add events
		mouseenter: function() {
			element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");
		mouseleave: resetPlace

When the mouseenter event occurs, the rotation is animated to 0, no rotation.  When the mouse leaves the element, the element animates to its initial random rotation.  You'll also note that I've used opacity to add to the subtle effect.

And there you have it:  spinning, fading, animated elements.  What's the alternative?  Static, boring, traditional icons.   What do you think?  Too much?  Too little?  Share your ideas!

Track.js Error Reporting

Upcoming Events

Recent Features

  • Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • CSS Circles

    A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape...

  • iPhone-Style Passwords Using MooTools PassShark

    Every once in a while I come across a plugin that blows me out of the water and the most recent culprit is PassShark: a MooTools plugin that duplicates the iPhone's method of showing/hiding the last character in a password field. This gem of...


  1. Arian

    Why not test really for the prefix:

    besides prefix for ie is ms. Also to be future proof you should have something that will work when no prefix is needed anymore.

    You can use Number.random(0, 360) too btw, instead of your own random function.

    But it’s a nice effect for sure :)

  2. A quick update has been made for the purposes of Chrome.

  3. Matthew F

    Cute but it seems like it detracts from readability/usability…

  4. tampe125

    but sometimes icons overlap, is there a way to prevent that?

  5. Thank you so much for the codes! I’m in the process of installing them in my website as well.

    I don’t know if this is redundant, especially for you as a moo tools developer, but I would add in the instructions to add the

    … just for newcomers or peeps who stumble upon :)

  6. oopps the codes were snipped up… i meant to add in src=” for javascript as well :)

  7. siddhesh

    is there anyway that the icons dont overlap please tell me how can that happen??

  8. Marcel Hadorn

    Very Nice, but this doesn’t work in IE9, although IE supports -ms-transform, and for example did make use of this with jQuery. Wasn’t yet able to find the issue, if you do, please let us know.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!