css - 旋转和平移

Question

我在旋转和定位一行文本时遇到了一些问题。现在它只是工作的位置。旋转也有效，但前提是我禁用定位。

CSS:

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

html 只是纯文本。

Answer 1

原因是因为您使用了两次转换属性。由于级联的 CSS 规则，如果它们具有相同的特异性，最后的声明将获胜。由于两个转换声明都在同一个规则集中，情况就是这样。

它的作用是这样的:

1. 将文本旋转 90 度。好的。
2. 将 50% 翻译 50%。好的，这是与第一步相同的属性，所以执行此步骤并忽略步骤 1。

参见 http://jsfiddle.net/Lx76Y/并在调试器中打开它以查看第一个声明被覆盖

由于翻译会覆盖旋转，因此您必须将它们组合在同一个声明中:http://jsfiddle.net/Lx76Y/1/

为此，您使用空格分隔的转换列表:

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

请记住，它们是在链中指定的，因此先应用平移，然后再应用旋转。