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

** FIDDLE

http://jsfiddle.net/CS9s2/

Answer 1

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

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