旋转翻译

我在旋转和定位一行文本时遇到了一些问题。现在只剩下姿势了。旋转也可以，但前提是我禁用定位。

CSS:

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

Html 只是纯文本。

187393 次浏览
小开
最佳答案

The reason is because you are using the transform property twice. Due to CSS rules with the cascade, the last declaration wins if they have the same specificity. As both transform declarations are in the same rule set, this is the case.

它是这样做的:

  1. 把文字旋转90度，好的。
  2. 翻译50% 乘以50% 。好的，这个属性和步骤1是一样的，所以执行这个步骤，忽略步骤1。

See http://jsfiddle.net/Lx76Y/ and open it in the debugger to see the first declaration overwritten

由于转换覆盖了旋转，因此必须将它们组合在相同的声明中: http://jsfiddle.net/Lx76Y/1/

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

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

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

小开

There is no need for that, as you can use css 'writing-mode' with values 'vertical-lr' or 'vertical-rl' as desired.

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

CSS:writing-mode

小开

有些东西可能会遗漏: 在我的链接项目中，原来空格分隔的列表在末尾也需要一个空格分隔的分号。

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

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

但这个可以:

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

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

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

先执行 rotate操作，然后执行 translate操作。

参见: CSS3转换顺序问题: 最右边的操作第一


提交答案