When a design feels a bit too static and you want to add a little bit of motion to it (either animated or simply implied), think about adding some rotation or skew to your design.

• Rotate user pictures a smidge, then rotate back on hover: Smashing Magazine
• Rotate some images and skew your header's background: Stripe
• Loading spinners of all sorts: loading.io
• And there's always those super impressive CSS animation demos

However you use it, at the end of the day, if you're rotating or skewing something, then you're dealing with angles.

And for a lot of people, angles are... intimidating. Scary, even. But I want to argue that they can be made much easier simply by using different angle units to define your angles.

Degrees and Radians are hard

The two most common angle units are the ones we all know and hate, degrees (deg) and radians (rad). Degrees are everyone's default, it seems, and they're fine, we're all used to them, but the math is awkward, to say the least. (What's halfway between 180deg and 270deg again?) And I'll guess that talking about radians sends a lot of people right back to high school trigonometry, trying not to make eye contact with the teacher when they ask a question about the tangent of 3π⁄4.

Brief side rant: Why do I need 2π to make a circle, so that everything is half what it should be? Why isn't (3/4)π just three quarters of the circle?? I mean, I know historically why, but why haven't we all switched to using τ instead yet?

Anyway, if you're one of the many (myself included) who have been nervous about rotations because it means unwieldy units and frustrating math, I have good news: CSS actually has four different units for angles, and the other two are, IMHO, much easier to work with. These units are called gradians (grad) and turns (turn).

Gradians

The gradian is a unit of rotation that's actually been around for a few centuries. It's also called the "metric degree" because it was formalized alongside the metric system in 18th century France.

It seems that some folks were fed up with the crazy math used by many of the units we now call Imperial Units (8 pints to a gallon, 12 inches to a foot, 14 pounds to a stone, ... are you guys okay?) and decided to make a system where everything is based on powers of 10: 100 centimeters to a meter, 1000 milliliters to a liter, 1000 grams to a kilogram, etc.

The same thing happened with angles. Instead of 360 degrees, someone suggested dividing a circle into a nice round 400 parts, so that each quadrant, or quarter-circle, is nicely divided into 100 bits. And thus, we have the gradian! There are 400 gradians in a full circle. A quarter-circle is 100 gradians (100grad in CSS), and a half circle is 200 gradians (200grad). Isn't that much easier to think about than 360, 90, and 180?

So gradians are cool, and I'll come back to them in a minute. But now let me tell you about the unit I'm really excited about.

Turns

Turns are one of those very small things that I'm very excited about (arguably too excited). But if you've done any significant amount of designing with rotation, especially animation, hopefully you'll feel the same way in a minute.

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're probably thinking:

• "I want this object to roll into view. It should probably turn over twice as it rolls."
• "Why don't we rotate that icon a quarter-turn on hover? That could be cool."
• "That loading icon should turn all the way around twice per second."

You don't usually think in degrees or radians. You think in terms of full turns and portions of turns. At least, I do.

Now imagine if you could just tell this to the browser, just tell it how many times the thing you're rotating should turn around, without converting it to any crazy units. Well, it turns out... you can! That's exactly what turns are!

One turn (1turn in CSS) just means "one full rotation". In other words, you know, "turn around one time". (It's apparently also a somewhat standardized unit of angular measurement

I like to think of turns as the "transparent" angle unit, because they're barely a unit at all. They are just the answer to the question above: "How many times should this thing turn around?" Or put another way, "How many turns should this thing make?"

Why are these units useful?

Let's look at some common angles compared between degrees, radians, and gradians (all rounded to 2 decimal places).

In every case, I find either gradians or turns to be the easiest to read, visualize, and use for mental math. It is true that I'm used to dealing with some angles in degrees, the usual 30, 90, 180, 270, 360. But as soon as I need any angle not on that list, it gets real hard, real fast. And the thing is, I'm used to dealing with everything else in base 10, from money to school grades to how old I am, so I'm way more experienced with base-10 mental math.

And when it comes to design, it's not really about mental math anyway. It's about visualizing what I want to make and turning that into code. And I think that's easier with gradians and turns, even for the common angles.

For example, if I think about it, I can figure out that 30 degrees is a third of a 90 degree quadrant. But I can't see 30 degrees in my head, not without a lot of effort. But when I see 33.33grad, all those 3s immediately say "one third" to me. I know what that number looks like, and for some reason I can more easily visualize what kind of angle that is, even though it's the same angle.

Example!

You can't write a whole article about a code feature without showing it off, can you?

When should we use each?

Looking at the table again, I probably wouldn't want to use turns if I'm doing a lot of animating within a single quadrant. 30deg converts to 0.0833turn and 60deg converts to 0.1667turn, neither of which mean anything to me. But I think a single quadrant is where gradians really shine. Everything becomes basically percentages of a quadrant! And that's awesome!

On the other end of the spectrum, I'd much rather use turns for anything larger than a single quadrant, especially one you rotate more than a single full circle.

Browser Support

In case you're concerned about browser support, don't be! Both of these units have been fully supported for a very long time in all major browsers, both desktop and mobile. Take a look at MDN's compatibility table for the <angle> CSS type:

Even IE 9 had full support for both gradians and turns. That's how far back this goes. So don't worry about browser support.

A Note about SVG

Unfortunately, the one place you can't use these amazing new units is in SVG animations, so if you're the kind of person who loves to hand-craft complex SVG, you're out of luck, and I'm so sorry 😢

Tragically, while SVG does use CSS, it's not quite the same as the CSS used for HTML. As Sara Soueidan points out in her excellent article about SVG transformations, angles in the variant of CSS used for SVG are always specified without a unit, and they're always degrees. Which is a huge bummer, because SVG is a great place to do animations. But on the other hand, I guess most people are typically using editors to generate their SVG these days, aren't they? I'm not big into that myself, so I'm no expert, but that's what I hear.

Conclusion

I want to hear some feedback on this one! This article has been pretty subjective, so I would really like to hear what other people think about these units. Has anyone used them on a significant project? Did you like them? Were they actually terrible for a reason I haven't considered? Let me know!