旋转和翻译

Question

我在旋转和定位一行文字方面遇到了一些问题.现在它只是有效的位置.旋转也可以,但只有我禁用定位.

CSS:

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

html只是纯文本.

Answer 1

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

这是做什么的:

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

由于翻译覆盖了旋转,你必须将它们组合在同一个声明中:http://jsfiddle.net/Lx76Y/1/

要执行此操作,请使用以空格分隔的变换列表:

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

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

我发现链接是非常重要的.比较一个翻译后跟一个旋转 - http://jsfiddle.net/Mrjm8/3/ - 旋转后跟一个翻译 - http://jsfiddle.net/Mrjm8/2/ (19认同)
@JakeTheSnake它不是。CSS转换是CSS功能。 (2认同)
哇谢谢你。你应该**加粗链接方面** :) 这是许多博客和规范从未提及的关键元素！ (2认同)

Answer 2

没有必要这样做，因为您可以根据需要使用带有值“vertical-lr”或“vertical-rl”的css“writing-mode”。

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

Answer 3

我不能评论所以这里.关于@David Storey回答.

小心CSS3链中的"执行顺序"!规则是(右)从(左).不是从左到右.

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

首先完成"旋转"操作,而不是"翻译"操作接下来/秒.

Answer 4

可能会错过的事情：在我的链接项目中，事实证明空格分隔的列表末尾也需要空格分隔的分号。

换句话说，这是行不通的：

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

但这确实：

transform: translate(50%, 50%) rotate(90deg) ; /*has a space before ";" */