錨定旋轉文本到父元素的頂部

Question

我有一些文字旋轉了90度。有誰知道一種方法讓它錨定到父元素的上限？

到目前爲止，我已經能夠僅僅以固定在地板：

http://jsfiddle.net/tpm3f

HTML：

<div> 
    <h2>hello, world</h2> 
</div> 

CSS：

div { height: 300px; background: red; position: relative; } 
h2 { 
    color: white; 
    margin: 0; 
    font-size: 2.5em; 
    -webkit-transform: rotate(-90deg); 
    -webkit-transform-origin: bottom left; 
    position: absolute; 
    left: 1.5em; 
    bottom: 0; 
} 

將bottom: 0更改爲top: 0會產生奇怪的結果;文字既沒有固定在天花板上，也沒有固定在天花板的右邊。

有誰知道一個純粹的CSS方式嗎？

Answer 1

如果你需要鎖定到頂部和左上角的元素看看像

h2 { 
    color: white; 
    margin: 0; 
    font-size: 2.5em; 
    -webkit-transform: rotate(-90deg); 
    -webkit-transform-origin: top right; 
    position: absolute; 
    right: 100%; 
    top: 0; 
    white-space:nowrap; 
} 

http://jsfiddle.net/8gsuD/1/

Answer 2

嘗試：

h2 { 
    -webkit-transform-origin: top right; 
     top: 0; 
    } 

Fiddle