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)
Here are a few notes to easily remember the different cases:
- There is always a relation between
right. If you will use
leftthen you will need
transform-origin:top leftand so on.
- We always rotate then translate (never the opposite)
- The rotation is
90degfor a text orientation to the bottom and
-90degto 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
Nothing to remember here 😉
More common positions (that we can easily find from the above)
Top comments (1)
Thanks for wonderful tips. You saved my day :)