133

I'm having some problems rotating and positioning a line of text. Now it's just position that works. The rotation also works, but only if I disable the positioning.

CSS:

#rotatedtext {
    transform-origin: left;
    transform: rotate(90deg);
    transform: translate(50%, 50%);
}

The html is just plain text.

4 Answers 4

220

The reason is because you are using the transform property twice. Due to CSS rules with the cascade, the last declaration wins if they have the same specificity. As both transform declarations are in the same rule set, this is the case.

What it is doing is this:

  1. rotate the text 90 degrees. Ok.
  2. translate 50% by 50%. Ok, this is same property as step one, so do this step and ignore step 1.

See http://jsfiddle.net/Lx76Y/ and open it in the debugger to see the first declaration overwritten

As the translate is overwriting the rotate, you have to combine them in the same declaration instead: http://jsfiddle.net/Lx76Y/1/

To do this you use a space separated list of transforms:

#rotatedtext {
    transform-origin: left;
    transform: translate(50%, 50%) rotate(90deg) ;
}

Remember that they are specified in a chain, so the translate is applied first, then the rotate after that.

5
  • 27
    I've found that the chaining is very important to keep in mind. Compare a translate followed by a rotation - jsfiddle.net/Mrjm8/3 - to a rotation followed by a translate - jsfiddle.net/Mrjm8/2
    – Luke
    Commented Dec 13, 2013 at 22:09
  • How does this work when written in HTML, instead of CSS? Commented Sep 26, 2015 at 15:57
  • 2
    @JakeTheSnake It doesn't. CSS transforms is a CSS feature. Commented Oct 18, 2016 at 7:47
  • 3
    Wow thank you. You should bold the chaining aspect :) that was a key element that many blogs and specs never mention!
    – cgatian
    Commented Jan 29, 2018 at 15:44
  • @Luke Thanks for pointing it out, the order really matters! Commented Jan 21, 2020 at 13:22
30

Be careful on the "order of execution" in CSS3 chains! The order is right to left, not left to right.

transformation: translate(0,10%) rotate(25deg);

The rotate operation is done first, then the translate.

See: CSS3 transform order matters: rightmost operation first

0
7

There is no need for that, as you can use css 'writing-mode' with values 'vertical-lr' or 'vertical-rl' as desired.

.item {
  writing-mode: vertical-rl;
}

CSS:writing-mode

6

Something that may get missed: in my chaining project, it turns out a space separated list also needs a space separated semicolon at the end.

In other words, this doesn't work:

transform: translate(50%, 50%) rotate(90deg);

But this does:

transform: translate(50%, 50%) rotate(90deg) ; /*has a space before ";" */
1
  • This isn't true in Chrome 90, Firefox 87, or Edge 88.
    – isherwood
    Commented Apr 20, 2021 at 20:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.