title: Aligning 270 degree oriented div (transform: rotate)
body: <p>I have a div (tab) that I rotate 270 degrees like so: </p>
  
  <pre><code>  -webkit-transform-origin: 100% 0%; 
    -webkit-transform: rotate(270deg);
  </code></pre>
  
  <p>(Example here: <a href="http://users.telenet.be/prullen/align.html" rel="nofollow noreferrer">http://users.telenet.be/prullen/align.html</a>)</p>
  
  <p>When I want to align the tab with the top edge of the content box, it's pretty easy. i just set "top" to "3px" (the border size). However, for the bottom it's another story. </p>
  
  <p>It appears I need to calculate this with jquery like so: </p>
  
  <pre><code>$tab.css('bottom', (Math.abs($tab.outerWidth()-$tab.outerHeight()) 
  </code></pre>
  
  <p>(Though for this example I'm just using a static value. It may not look exactly like I want it to in your browser, here's an image: )</p>
  
  <p><img src="https://i.stack.imgur.com/srcwk.png" alt="enter image description here"></p>
  
  <p>I was wondering if there is a better way since this does not seem to work all that well in firefox for example (1 pixel shift). Is there an easier way by adjusting the transform-origin perhaps? </p>
  
  <p>(Note that I need to keep the same div structure I have now)</p>
  
  <p>Ideally it'd be as easy as setting bottom to: 3px (the border thickness)</p>
  
  <p>Thanks.</p>