CSS 旋转和翻译
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16795548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate and translate
提问by Sera
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:
CSS：
#rotatedtext {
transform-origin: left;
transform: rotate(90deg);
transform: translate(50%, 50%);
}
The html is just plain text.
html 只是纯文本。
回答by David Storey
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.
原因是因为您使用了两次 transform 属性。由于具有级联的 CSS 规则，如果它们具有相同的特异性，则最后一个声明获胜。由于两个转换声明都在同一个规则集中，情况就是这样。
What it is doing is this:
它正在做的是：
- rotate the text 90 degrees. Ok.
- translate 50% by 50%. Ok, this is same property as step one, so do this step and ignore step 1.
- 将文本旋转 90 度。好的。
- 按 50% 翻译 50%。好的，这与第一步的属性相同，因此执行此步骤并忽略步骤 1。
See http://jsfiddle.net/Lx76Y/and open it in the debugger to see the first declaration overwritten
参见http://jsfiddle.net/Lx76Y/并在调试器中打开它以查看覆盖的第一个声明
As the translate is overwriting the rotate, you have to combine them in the same declaration instead: http://jsfiddle.net/Lx76Y/1/
由于翻译覆盖旋转，您必须将它们组合在同一个声明中：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.
请记住，它们是在链中指定的，因此首先应用平移，然后应用旋转。
回答by darthRods
I can't comment so here goes. About @David Storey answer.
我无法评论，所以这里是。关于@David Storey 的回答。
Be careful on the "order of execution" in CSS3 chains! The order is right to left, not left to right.
小心 CSS3 链中的“执行顺序”！顺序是从右到左，而不是从左到右。
transformation: translate(0,10%) rotate(25deg);
The rotateoperation is done first, then the translate.
该rotate操作是首先进行，那么translate。
See: CSS3 transform order matters: rightmost operation first
回答by biojazzard
There is no need for that, as you can use css 'writing-mode' with values 'vertical-lr' or 'vertical-rl' as desired.
没有必要这样做，因为您可以根据需要使用值为 'vertical-lr' 或 'vertical-rl' 的 css 'writing-mode'。
.item {
writing-mode: vertical-rl;
}
回答by Brian Coyle
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 ";"
