Question

我正在尝试两个旋转包含少量文本的两个div。问题是我希望它们垂直对齐，但似乎它们从中心点旋转，因此它们不对齐。

有人有什么想法吗？

HTML

<div id="header-one" class="rotate-90">
   header one
</div>

<div id="header-two" class="rotate-90">
   2014
</div>

CSS

#header-one {
   position:fixed;   
   right:0;
   top:33%;
}

#header-two {
   position:fixed;   
   right:0;
   top:66%;
}

.rotate-90 {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

** FIDDLE

http://jsfiddle.net/CS9s2/

Answer 1

您需要使用transform-origin来设置旋转的原点。在这种情况下，围绕其右上角旋转每个<div>是有意义的。

 .rotate-90 {
     -webkit-transform-origin: top right;
     -webkit-transform: rotate(90deg);
     /* other vendor prefixes */
 }

CSS垂直文本旋转对齐

1 个答案: