How to correctly position rotated text using CSS

^{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.

The above is the most supported way to achieve what we want but we can do easier using writing-mode

The corners

The sides

Nothing to remember here 😉

More common positions (that we can easily find from the above)

OR