Using transform: rotate() for a sideways text effect is pretty simple CSS but if you’re anything like me, you forget the details for positioning that text and have to play around with translates and transform-origins in the Inspector every time.

So I made myself a cheatsheet for positioning rotated text and thought I’d share it. You can align text to the top, center, or bottom of its parent container and change the direction of the text up or down.

Check it out here.