I love coming across little overlooked CSS gems, like the gradien (grad) and turn (turn) units that Ken Bellows uncovers in his post explaining them. I don’t know, maybe y’all are already aware of them, but they’re certainly new to me.
They’re additional options for dealing with angles, where degrees (deg) and radians (rad) are more commonly known. I’m partial to degrees anytime I’m working with rotations. But now that I know there’s an easier way to express a half rotation by using 0.5turn instead of 180deg, I can see myself reaching for turns much more often.
When you’re designing an animation or thinking about how to add some rotation to your design, how are you thinking about it? You probably aren’t thinking in numbers. … You don’t usually think in degrees or radians. You think in terms of full turns and portions of turns. At least, I do.
After looking at his table of comparisons, I take the point:
| Degrees | Radians | Gradians | Turns | My Fav Unit |
|---|---|---|---|---|
30deg |
0.52rad |
33.33grad |
0.08turn |
Gradians |
45deg |
0.79rad |
50grad |
0.13turn |
Gradians |
60deg |
1.04rad |
66.67grad |
0.17turn |
Gradians |
90deg |
1.57rad |
100grad |
0.25turn |
Turns |
180deg |
3.14rad |
200grad |
0.5turn |
Turns |
360deg |
6.28rad |
400grad |
1turn |
Turns |
720deg |
12.56rad |
800grad |
2turn |
Turns |
1080deg |
25.12rad |
1200grad |
3turn |
Turns |
Hear, hear! And since these units are supported back to IE 9, seems like something fun to try out.
(Hat tip to Rachel Andrew for sharing this in her awesome CSS Layout News email.)