旋转并翻译

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

CSS:

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

HTML只是纯文本。

原因是因为您正在使用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) ; } 

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

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

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

CSS:写作模式

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

注意CSS3链中的“执行顺序”! 该规则是(右)从(左)。 不从左到右。

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

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

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

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

换句话说,这不起作用:

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

但是这样做:

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