我在旋转和定位一行文本时遇到了一些问题。现在它只是工作的位置。旋转也有效,但前提是我禁用定位。
CSS:
#rotatedtext {
transform-origin: left;
transform: rotate(90deg);
transform: translate(50%, 50%);
}
html 只是纯文本。
最佳答案
原因是因为您使用了两次转换属性。由于级联的 CSS 规则,如果它们具有相同的特异性,最后的声明将获胜。由于两个转换声明都在同一个规则集中,情况就是这样。
它的作用是这样的:
- 将文本旋转 90 度。好的。
- 将 50% 翻译 50%。好的,这是与第一步相同的属性,所以执行此步骤并忽略步骤 1。
参见 http://jsfiddle.net/Lx76Y/并在调试器中打开它以查看第一个声明被覆盖
由于翻译会覆盖旋转,因此您必须将它们组合在同一个声明中:http://jsfiddle.net/Lx76Y/1/
为此,您使用空格分隔的转换列表:
#rotatedtext {
transform-origin: left;
transform: translate(50%, 50%) rotate(90deg) ;
}
请记住,它们是在链中指定的,因此先应用平移,然后再应用旋转。
关于css - 旋转和平移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16795548/