将旋转文本锚定到父元素的天花板

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

小提琴