수직 및 수평 CSS 회전 한 후 텍스트를 정렬

Question

그래서 수직 (90도) 수평에서 일부 텍스트를 회전과 같이 CSS를 사용하고 있습니다 :

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
writing-mode: tb-rl; 
filter: flipv fliph; 

내 문제는이 이외의 텍스트 방식으로 이동한다는 것입니다 컨테이너 div. 컨테이너 안에 보관하는 트릭이 있습니까? 내가 설정할 수있는 앵커 포인트가 있습니까? 글을 조정할 수있는 크로스 브라우저 방식이란 무엇입니까?

Answer 1

당신은 몇 가지 CSS 속성과 그것을 철수 할 수 ... 또는

#whatever { 
    position: relative; 
    top: -4px; 
    right: -10px; 
} 

, 당신은 transform-origin 속성을 재생할 수 있습니다 :

transform: rotate(-90deg); 
transform-origin:20% 40%; 
-ms-transform: rotate(-90deg); /* IE 9 */ 
-ms-transform-origin:20% 40%; /* IE 9 */ 
-webkit-transform: rotate(-90deg); /* Safari and Chrome */ 
-webkit-transform-origin:20% 40%; /* Safari and Chrome */ 
-moz-transform: rotate(-90deg); /* Firefox */ 
-moz-transform-origin:20% 40%; /* Firefox */ 
-o-transform: rotate(-90deg); /* Opera */ 
-o-transform-origin:20% 40%; /* Opera */ 

Answer 2

대체 방법, 더 브라우저 호환 미리 텍스트 양에 대한 정보가 필요하지 않습니다.

.disclaimer { 
    position: absolute; 
    right: 10px; 
    bottom: 10px; 
    font-size: 12px; 
    transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -webkit-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    line-height: 15px; 
    height: 15px; 
    width: 15px; 
    overflow: visible; 
    white-space: nowrap; 
} 

http://jsfiddle.net/d29cmkej/