旋转和平移答案

【问题标题】：Rotate and translate旋转和平移
【发布时间】：2013-05-23 15:08:23
【问题描述】：

我在旋转和定位一行文本时遇到了一些问题。现在它只是有效的位置。旋转也有效，但前提是我禁用了定位。

CSS：

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

html 只是纯文本。

【问题讨论】：

【解决方案1】：

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

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

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

但这确实：

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

【讨论】：

【解决方案2】：

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

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

rotate 操作首先完成，然后是 translate。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

它在做什么：

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

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

为此，您需要使用空格分隔的转换列表：

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

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

【讨论】：