title: Aligning an element rotated in css
body: <p>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.</p>
  
  <p><a href="http://jsfiddle.net/QpHCM/" rel="noreferrer">http://jsfiddle.net/QpHCM/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="handle"&gt;Text&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS (Sass)</strong></p>
  
  <pre><code>$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;
  }
  </code></pre>
  
  <p>This is driving me mad. Can anyone get the rotated element aligned to top: 0, left:0 in the body when rotated?</p>