旋转和平移

86

我在旋转和定位一行文本时遇到一些问题。现在，只是位置有效。旋转也可以，但是仅当我禁用定位时。

CSS：

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

html只是纯文本。

css webkit transform css-transforms

— 色拉
source

157

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

它在做什么是这样的：

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

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

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

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

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

— 大卫·斯托里
source

23

我发现要牢记链接非常重要。比较A转换再旋转的- jsfiddle.net/Mrjm8/3 -一个旋转再翻译- jsfiddle.net/Mrjm8/2

— 卢克

用HTML而不是CSS编写时如何工作？

— JakeTheSnake

2

@JakeTheSnake它不是。CSS转换是CSS功能。

— Stijn de Witt

2

哇谢谢你。您应该加粗链接方面:)，这是许多博客和规范都从未提及的关键元素！

— cgatian

@Luke感谢您指出，顺序确实很重要！

— 亚米·奥德梅尔

12

我不能发表评论，所以就到这里。关于@David Storey的答案。

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

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

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

— darthRods
source

4

不需要这样做，因为您可以根据需要将CSS的“写入模式”与值“ vertical-lr”或“ vertical-rl”一起使用。

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

— 生物爵士
source

2

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

换句话说，这不起作用：

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

但是这样做：

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

— 布莱恩·科伊尔
source