How to correctly position rotated text using CSS

#html #css #beginners #webdev

^{Find out more CSS tricks at css-tip.com}

It's always a hassle to correctly position a rotated text. Especially to position such text in the corner or the sides of another element.

No need to bother yourself with such a task. Find below all the common cases. It's responsive and no hardcoded width or height is needed (hover to change the text direction)

The corners

The sides

Here are a few notes to easily remember the different cases:

There is always a relation between transform-origin and top/left/bottom/right. If you will use top and left then you will need transform-origin:top left and so on.
We always rotate then translate (never the opposite)
The rotation is 90deg for a text orientation to the bottom and -90deg to the top.
The translation is +/-100% for the corners and +/-50% for the sides. No need to remember them all, a quick trial & error can give you the correct value.