title: Transform origin relative to container. Rotated text
body: <p>I need some help trying to understand how <code>transform-origin</code> works, I've done my Googling but cannot find anything that can help my specific use case. Here's what i'm trying to achieve: <img src="https://i.stack.imgur.com/BWwcv.jpg" alt="Here&#39;s how it should look"></p>
  
  <p>I have a fixed footer with a fixed height, within that I have two lines of rotated text (left hand column), how can I get complete control over its positioning? At the moment it starts at the top of the footer and is outside of the footer entirely, Ive setup a fiddle to show my current code: <a href="http://jsfiddle.net/eury7f6f/" rel="noreferrer">http://jsfiddle.net/eury7f6f/</a></p>
  
  <p>Anybody have any ideas how to achieve what I want?</p>
  
  <pre><code>.vertical-text {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
  
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
  
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }
  </code></pre>