Aligning an element rotated in css

Question

I trying to rotate a div on a page and have it rest right up against the left side of its parent element (the body in this case). I know about transform-origin but no matter what values I insert it doesn't align correctly.

http://jsfiddle.net/QpHCM/

HTML

<div class="handle">Text</div>

CSS (Sass)

$transform: rotate(90deg);
$transform-origin: 0 0;

body {
    border: 1px solid red;
}

.handle {
    width: 50px;
    height: 15px;
    background: blue;
    color: white;
    text-align: center;
    padding: 5px;
    line-height: 15px;
    transform: $transform;
    -moz-transform: $transform;
    -webkit-transform: $transform;
    transform-origin: $transform-origin;
    -moz-transform-origin: $transform-origin;
    -webkit-transform-origin: $transform-origin;
}

This is driving me mad. Can anyone get the rotated element aligned to top: 0, left:0 in the body when rotated?

Answer 1

Since the rotation is around the center of the element, its not aligned with left: 0.

use:

$transform: rotate(90deg) translate(0, -25px);

the negative half of element width gets you there.

working example.