How Do You Align 270deg Rotated Text To Top Left?

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 the e

Solution 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:

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

Solution 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: 00;

http://jsfiddle.net/zW7SP/