CodeinWP CodeinWP

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 2p radians. If you know what “p”, 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:

16 Responses

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

  2. Beben Koben says:

    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. Harry Wakter says:

    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 says:

      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. webexstudios says:

    Wow Great Tutorial. Thanks

  8. Ana says:

    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!

  10. I hate IE but thanks guys great article this dug me out of a hole.

  11. Dot Voice says:

    I’m glad IE is no longer the issue it used to be, always good to watch these techniques develop.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).