title: Dynamically update transform-origin of a CSS3 rotated element when modifying width or height
body: <p>Following on from <a href="https://stackoverflow.com/questions/7091783/changing-width-height-to-a-css-rotated-div-triggers-top-left-reposition/">Changing width/height to a CSS rotated div triggers top/left reposition</a> I need some help to solve a CSS rotation and dynamic width/height.</p>
  
  <p>I understand <a href="https://developer.mozilla.org/en/CSS/-moz-transform-origin" rel="nofollow noreferrer"><code>transform-origin</code></a> and think I need to dynamically update it at the same time the width or height of the element is updated. I'm only interested in the technical solution, rather than any cross-browser cleverness and hence <a href="http://jsfiddle.net/AqkQb/5/" rel="nofollow noreferrer"><strong>the demo</strong></a> only uses the <code>-webkit</code> prefix.</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div id="wrap"&gt;
      &lt;div id="rotated"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;
      Width: &lt;input id="width" type="range" min="20" max="400" step="1" value="200"&gt;
      Height: &lt;input id="height" type="range" min="20" max="400" step="1" value="100"&gt;
      Angle: &lt;input id="angle" type="range" min="0" max="360" step="1" value="0"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>#rotated {
      background:lightblue;
      border:1px dotted #000;
      height:100px;
      width:200px;
      position:absolute;
      top:300px;
      left:100px;
      overflow:hidden;
  }
  
  #width, #height, #angle {
      display:block;
      margin-bottom:10px;
      width:200px;
  }
  </code></pre>
  
  <h3>JavaScript</h3>
  
  <pre><code>$('#width').change(function() {
      $('#rotated').css({width:this.value + 'px'});
  });
  
  $('#height').change(function() {
      $('#rotated').css({height:this.value + 'px'});
  });
  
  $('#angle').change(function() {
      $('#rotated').css({'-webkit-transform': 'rotate(' + this.value + 'deg)'});
  });
  </code></pre>
  
  <p>In the <a href="http://jsfiddle.net/AqkQb/6/" rel="nofollow noreferrer"><strong>second demo</strong></a>, adding the CSS</p>
  
  <pre><code>#rotated {
      -webkit-transform-origin: 100px 50px;
      -webkit-transform: rotate(60deg);
  }
  </code></pre>
  
  <p>and updating the <code>value</code> of the <em>angle</em> slider to <code>60</code></p>
  
  <pre><code>Angle: &lt;input id="angle" type="range" min="0" max="360" step="1" value="60"&gt;
  </code></pre>
  
  <p>produces the correct result when modifying the width/height via the sliders, in that the element grows and shrinks in the <code>x, y</code> dimensions without moving position. However, rotating the element now no longer around the desired (centre point) origin.</p>
  
  <p>I have tried some variations (mousedown, mousemove, change) on this which I thought would set the origin before the width/height is modified but the <code>&lt;div&gt;</code> is still shifting position.</p>
  
  <pre><code>$('#width, #height, #angle').change(function() {
      $('#rotated').css({'-webkit-transform-origin': $('#width').val()/2 + 'px' + $('#height').val()/2 + 'px'});
  });
  </code></pre>
  
  <p>I assume jQuery is applying the CSS changes at the same time, whereas I think that the origin needs updating <em>before</em> the width/height change.</p>
  
  <p>Basically I want the shape to always rotate about the center point and to not move when modifying the width/height if the shape is already rotated.</p>