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.
I’ve created a demo page that rotates boxes on hover using these alternate units:
Actually, checking the demo out in IE10 CP works. So I think it should be “IE10 works, but IE9 doesn’t”.
Thank you for that. I had originally tested only up to IE10PP2 and forgot to point that out. I’ve added a couple extra notes to the article.
turn unit not good on FF transform: rotate(1turn);
Nice article will keep this in mind, will IE always be a thorn in a Web designers world.
Just tried the demo in Aurora 13.0a2 and they all work fine!
Thank you. I added an update to the post.
work fine! Something I haven’t used before, but defiantly find it useful now.
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.
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.
Wow Great Tutorial. Thanks
I would like a
PIconstant before I start using radians.rotate(0.78539816rad)looks ugly, but I likerotate(PI/4)better thanrotate(45deg).It’s called Math.PI (https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math/PI) and it’s been there approximately forever.
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!
I was looking for some solutions to IE7/8/9’s rotate issues online and came across this article. I like where this reply was going but the link was broken. I think this may be what you were meaning to link to: http://twigzone.floatzel.net/tests/rotate-alt.html
Here are two great articles on rotating in IE (I have not tested for the animation but it rotates the object nonetheless):
http://www.cssrotate.com/?degrees_of_rotation=180&apply_easing=1
http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
I hope these help others looking for the dreaded IE solutions. Cheers!
I hate IE but thanks guys great article this dug me out of a hole.
I’m glad IE is no longer the issue it used to be, always good to watch these techniques develop.