110

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.

4

4 回答 4

187

原因是您两次使用了 transform 属性。由于具有级联的 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) ;
}

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

于 2013-05-28T21:12:39.133 回答
21

小心 CSS3 链中的“执行顺序”！顺序是从右到左，而不是从左到右。

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

rotate操作先完成，然后translate.

请参阅： CSS3 转换顺序很重要：最右边的操作优先

于 2017-04-17T04:26:39.443 回答
5

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

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

CSS：写作模式

于 2017-03-01T10:50:34.223 回答
2

可能会遗漏的东西：在我的链接项目中，事实证明一个空格分隔的列表最后还需要一个空格分隔的分号。

换句话说，这不起作用：

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

但这确实：

transform: translate(50%, 50%) rotate(90deg) ; /*has a space before ";" */
于 2017-04-12T08:13:29.930 回答