CSS垂直文本旋轉對齊

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);
}

**場

http://jsfiddle.net/CS9s2/

Answer 1

您需要使用transform-origin設置旋轉的原點。 在這種情況下，有意義的是將每個<div>繞其右上角旋轉。

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