There is a turn unit in css

Sep 23 2018

Following up on my posts inspired by tweets that I come across (front-end dev twitter is amazing for finding little tips and tricks and stuff like I like to post here), here is an amazing thing I came across by none other than Wes Bos:

🔥 Did you know CSS has a `turn` unit? It’s often easier to turn something `rotate(0.75turn)` instead of doing the math to `rotate(270deg)`

— Wes Bos (@wesbos) August 20, 2018

Did you about the turn unit? I sure as hell didn’t.

I think Wes’ tweet sums up how it works, as it’s a pretty simple property, but here it is in action incase you want to play around with it a bit:

See the Pen JaYXXN by Kevin (@kevinpowell) on CodePen.

As you might be able to see here, for some adjustments or minor tweeks, sticking with degrees might help, but for bigger rotations, this can be pretty handy, specially if you are doing an animation and need something to turn more than one time, you can easily enough use 4turn (hover over the last one in the above codepen to see that in action).

This probably isn’t something that you’d be using on a regular basis, but I love finding out about these little things. It’s one of those little things that will pop-up from time to time and make things just a little bit easier.

Don't want to miss an article?

While creating my YouTube videos, I come across a lot of fun snippits of information and little known CSS properties that aren't really worth building full videos about. I share the cool little things I run across (like you read in this post), as well as some design tips and tricks, with a new post every Sunday. Sign up below to never miss a post.

No spam + you can unsub at any time :)