css – 旋转和翻译

我有一些问题旋转和定位一行文本。现在它只是位置的作品。旋转也可以，但是只有当我禁用定位。

CSS：

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

html只是纯文本。

解决方法

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

它正在做的是：

>将文本旋转90度。好。
>将50％减50％。确定，这是与步骤一相同的属性，所以这一步，忽略步骤1。

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

由于translate正在覆盖旋转，因此您必须在相同的声明中合并它们：http://jsfiddle.net/Lx76Y/1/

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

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

请记住，它们是在链中指定的，因此首先应用translate，然后再应用rotate。