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

** 뿐인 당신은 회전의 원점을 설정하는 transform-origin를 사용할 필요가

http://jsfiddle.net/CS9s2/

Answer 1

. 이 경우, 각 오른쪽 상단에 각 <div>을 돌리는 것이 좋습니다.

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