旋转和翻译

Question

我在旋转和定位一行文字方面遇到了一些问题。现在它只是有效的位置。旋转也有效，但只有在我禁用定位时才会有效。

CSS：

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

html只是纯文本。

Answer 1

原因是因为您使用了两次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) ;
}

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

Answer 2

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

小心CSS3链中的“执行顺序”！规则是（右）从（左）。不是从左到右。

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

首先完成“旋转”操作，而不是“翻译”操作接下来/秒。

请参阅： CSS3 transform order matters: rightmost operation first

Answer 3

没有必要，因为你可以使用css＆＃39;写模式＆＃39;价值观＆＃39; vertical-lr＆＃39;或者＆＃39; vertical-rl＆＃39;根据需要。

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

Answer 4

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

换句话说，这不起作用：

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

但这样做：

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