旋转并翻译

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

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/并在debugging器中将其打开，以查看被覆盖的第一个声明;

由于翻译是覆盖旋转，你必须把它们在相同的声明，而不是： http : //jsfiddle.net/Lx76Y/1/

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

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

请记住，它们是在链中指定的，所以首先应用翻译，然后再应用翻译。

Answer 2

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

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

Answer 3

我不能评论，所以在这里。 关于@David Storey的答案。

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

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

首先完成“旋转”操作，然后是“翻译”操作。

请参阅： CSS3变换顺序问题：最右边的操作第一

Answer 4

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

换句话说，这不起作用：

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

但是这样做：

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