Rotate and translate

问题

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.

回答1:

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.

回答2:

I can't comment so here goes. About @David Storey answer.

Be careful on the "order of execution" in CSS3 chains! The rule is (right) from (left). Not Left to Right.

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

The "rotate" operation is done first, than the "translate" operation comes next/second.

See: CSS3 transform order matters: rightmost operation first

回答3:

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;
}

回答4:

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 ";"

来源：https://stackoverflow.com/questions/16795548/rotate-and-translate