How do you align 270deg rotated text to top left?

Question

This should be a very simple problem you would think. I have a box with some title text that I want to rotate -90 degrees. I would like it to be absolutely positioned so that th

Answer 1

You should use transform-origin to adjust the transformation point, along with some creative use of positioning properties.

http://jsfiddle.net/thirtydot/JxEfs/1/

CSS:

#box {
    padding: 30px;
    position: relative;
    border: 1px solid blue;
}
#box > div {
    border: 1px solid red;
    position: absolute;
    top: 0;
    right: 100%;
    white-space: nowrap;

    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: right top;
    -moz-transform: rotate(270deg);
    -moz-transform-origin: right top;
    -ms-transform: rotate(270deg);
    -ms-transform-origin: right top;
    -o-transform: rotate(270deg);
    -o-transform-origin: right top;
    transform: rotate(270deg);
    transform-origin: right top;
}

HTML:

<div id="box">
    hello
    <div>rotated!</div>
</div>

Answer 2

Can also work without right:100% Just rotate 270 deg around left top and then translate it back at new 100% width.

transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;

http://jsfiddle.net/zW7SP/