Keith Bartholomew

About Me

Quick Code Snippet: Using the CSS3 “Rotation” Transition

If you follow the world of web design, then you’ve no doubt heard lots of chatter about HTML5 and CSS3 and all of the magical, wonderful things that can be done with these new technologies, even if they are still in draft. For my professional work, I make a point not to rely on these technologies, since support for them is spotty, and even the browsers that support advanced HTML5 features support them in different ways.

Now, it wouldn’t be wise to ignore all of these fancy new technologies because one day they’ll switch from being “bleeding edge” to “standard.” It’s good to play around with some new toys, and start filtering them into your production projects when the time is right, and when browser support can be somewhat guaranteed.

Today, I was motivated to take a stroll into the world of CSS3, with an aim to find a practical purpose for it and learn something new at the same time. Inspired by Steve Gibson’s “Password Haystacks” and Apple’s “clock” graphics for the new Retina MacBook Pro (scroll to the battery section), I realized that the ever-confusing puzzle of password requirements could be expressed quite clearly with a graphic (more subtle than this demonstration) that engages the use while they concoct their new password. Try it out, and watch as the gauge uses an animation to spin to the approximate “strength” of the text you enter:

Prior to HTML5 and CSS3, such animations would only have been possible with the use of a Flash plug-in. This method uses just 2 images (actually 4—one for the face of the gauge, one for the needle, and another one of each for retina displays) and a little bit of javascript to accomplish the same effect, while being compatible with mobile devices as well. Making the rotation happen is as simple as adding just 2 attributes to the CSS for the gauge:

#gauge #needle { -webkit-tranisition: all 0.3s; -webkit-transform: rotate(30deg); }

You’ll notice the -webkit- at the beginning of each. Sadly, this is one area of CSS3 that even Google Chrome won’t handle without an unfortunate, vendor-specific CSS attribute. To make this compatibile with other browsers, I have to write several other, almost-identical attributes for Mozilla Firefox, Opera, and IE9, too. For simplicity here, I’ll just write and explain the Webkit (Chrome/Safari) attributes.

The first attribute, “-webkit-transition” tells the browser how to handle changes that are provided with the second attribute, “-webkit-transform.” Without the transition attribute, any changes to the position, rotation, or size of the element would happen instantaneously. We’ve specified above that we want any changes to be animated over the course of 0.3 seconds.

The second attribute, “-webkit-transform,” is where the magic really happens. We’re telling the browser to rotate the element 30 degrees clockwise of its natural position. The only catch is that if we specify this directly in the document, (like you usually do with CSS styles) the element will rotate 30 degrees as soon as the page loads. That’s not very helpful!

However, we can use Javascript to rotate our element on-demand, and bind it to an event happening elsewhere in the document. In this case, we wait until the user enters something into the text box, then do some quick math (using the Password Haystacks formula) and rotate the needle the appropriate amount. The effect is an extremely responsive user experience, and that’s tons of fun to play around with. Feel free to snoop around at the source code and use as you wish.

  0 comments about this.  Leave your own