Anchoring rotated text to parent element's ceiling

Question

I have some text that I've rotated -90deg. Does anyone know a way to get it to anchor to the ceiling of the parent element?

So far I've been able to anchor only to the floor:

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

Changing bottom: 0 to top: 0 produces a weird result; the text is neither anchored to the ceiling by its left nor its right side.

Does anyone know a pure CSS way round this?

Answer 1

if you need the element locked to the top and the left corner have a look at something like

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

Try:

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

Fiddle