Alternative Units for CSS3 Rotation Transforms

A typical CSS3 rotate transform, with all the gory vendor details, looks like this:

.example {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

You’ll notice the unit being used to rotate this example element is the “degrees” unit, declared by appending the string “deg” at the end of the unit value.

But “degrees” isn’t the only unit available when rotating elements with transforms. You can also use other units, namely gradians, radians, and turns.

Gradians (grad)

Gradians (also referred to as “gons” or “grades”) are abbreviated using the string “grad” appended to the unit value. A full circle has 400 gradians, which would be the equivalent to 360 degrees. So converting our example from above to gradians would look like this (vendors omitted for all the rest of the examples):

.example {
	transform: rotate(400grad);
}

Because “400” is a nice round number, it seems these units would be more intuitive for experimenting or could possibly make on-the-fly calculations a little easier.

Radians (rad)

A radian or “rad” unit is expressed like this:

.example {
	transform: rotate(6.2831853rad);
}

A full circle contains 2π radians. If you know what “π”, or “pi”, means, you’ll know that pi is equal to about 3.14, or more precisely 3.14159265. So that’s exactly half a circle in terms of radians. So we double that and we get 6.2831853rad to get a full circle.

So 6.2831853rad is equal to 400grad which is equal to 360deg. As you can see, radians are not as developer-friendly as gradians or even degrees.

Turns (turn)

A “turn” unit is exactly what it sounds like: One full circle. So the equivalent of what we’ve done above, using turn units, would be:

.example {
	transform: rotate(1turn);
}

So this unit is probably the most intuitive to use because it’s exactly what we want: one “turn” unit equals one full rotation.

Browser Support?

These alternate units (along with degrees) are all part of the angle CSS data type.

From my testing, the latest stable releases of Chrome, Safari, and Opera support all three units. Firefox supports gradians and radians, but not turns. Internet Explorer (tested up to IE10 PP2) doesn’t support any of these.

Update: As pointed out in the comments, the latest IE10PP supports all three units, and so does the latest aurora build of Firefox.

I’ve created a demo page that rotates boxes on hover using these alternate units:

Advertise Here

14 Responses

  1. Actually, checking the demo out in IE10 CP works. So I think it should be “IE10 works, but IE9 doesn’t”.

  2. turn unit not good on FF transform: rotate(1turn);

  3. Nice article will keep this in mind, will IE always be a thorn in a Web designers world.

  4. Just tried the demo in Aurora 13.0a2 and they all work fine!

  5. work fine! Something I haven’t used before, but defiantly find it useful now.

  6. Nice interesting explanation of this CSS property. Its quite confusing with all the different units of measuring the turn – why on earth would anyone use anything other than ‘deg’ oir turns?! I like the update about IE10 – for a minute it gave me a good laugh to think that even IE10 doesn’t support these fairly basic CSS3 properties.

    • blufive:

      Radians (rad) may not be human-friendly, but they are very maths-friendly. For example, if you’re playing with a physics library, or anything involving calculus, it’s quite likely that it will be spitting all its angles out as radians.

  7. Wow Great Tutorial. Thanks

  8. Ana:

    I would like a PI constant before I start using radians. rotate(0.78539816rad) looks ugly, but I like rotate(PI/4) better than rotate(45deg).

  9. Ah, remember my comment about IE10CP supporting it but not IE9? Ignore the latter part: I have confirmed that, yes, IE9 works, too. The fact that you were using CSS transitions/animations were causing IE9 to skip the entire animation. The apparent effect is that it does not work, but in fact it does. I noticed this mistake while I was reading MSDN stuff about CSS3 support in IE.

    Here’s a testcase without involving any hover states, animations or transitions:

    http://twigzone.floatzel.net/RotateAlt/RotateAlt.html

    Sorry for the very, very late addition/correction!

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.