Skip to Content

There is a turn unit in CSS

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 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?

If you never want to miss out on any of my content? Subscribe to my newsletter!

It's one email every Sunday to keep you up to date with what I've been up to, plus I'll throw in some bonus stuff every now and then that I don't post anywhere else :)

    We won't send you spam. Unsubscribe at any time.