выравнивание по вертикали вертикального текста CSS

Question

Я пытаюсь повернуть два divs, которые содержат небольшое количество текста. Проблема в том, что я хочу, чтобы они выровнялись по вертикали, но кажется, что они вращаются из центральной точки, поэтому они не выравниваются.

У кого-нибудь есть идеи?

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 */ 
}