title: CSS3 scale transform and positioning
body: <p>So I'm working on a project where I need to scale a div (and all the elements it contains) as the window resizes. My idea is to use the CSS3 scale transform. However, as I resize I find that the div shrinks into the middle of the window rather than staying in the spot I positioned it in. </p>
  
  <p>Here is a (really) simple example that I hope will illustrate when I mean:  <a href="http://jsfiddle.net/hmY9q/3/" rel="nofollow">http://jsfiddle.net/hmY9q/3/</a> -- What I would like to see is the blue box flush with both the border of the result box and the bottom of the red box.</p>
  
  <p>My first thought at rectifying the problem was to calculate the difference between the postion I would like the div to be at and the position it actually appears and use the transform matrix to both scale and translate at the same time. I wasn't able to get this to work properly though and it seems like an inefficient and otherwise inelegant solution.</p>
  
  <p>Here's the code for that (won't let me post question without code apparently):</p>
  
  <pre><code>var yShift = (container.height() * scale) - container.height();
  var xShift = (container.width() * scale) - container.width();
  container.css(browserID + "transform", "matrix("+ scale + ",0,0," + scale + "," + -xShift + "," + -yShift + ")");
  </code></pre>
  
  <p>note: I'm programming in haxe and compiling to js, so that's why the code is a bit different. 'container' is a JQuery object and can be treated as one.</p>
  
  <p>So, can anyone out there think of some magic CSS or javascript that would simplify this? Am I on crazy pills and missing something really dumb? Thanks!</p>