title: Change transform-origin on already transformed element
body: <p>A couple of other questions have been asked that are similar to this, but none of them had sufficient answers.  </p>
  
  <p>I have a transformed element with a current transform origin.  I want to change the transform origin of the element and then transform it again.  The problem is that when I change the transform origin, the original transform is calculated based on the new transform origin and then the new transform takes place.</p>
  
  <p>I would like to know if there is a way to make the currently transformed element stay in its exact place while I change the transform origin and then transform the element based on the new origin.</p>
  
  <p>Check out this fiddle if my description is confusing.
  <a href="http://jsfiddle.net/justinbchristensen/a6reyd3t/1/" rel="nofollow">http://jsfiddle.net/justinbchristensen/a6reyd3t/1/</a></p>
  
  <pre><code>var rotateDiv = $('#rotate-div');
  var rotation = 0;
  
  $('#rotate-btn').on('click', function() {
      rotation += 90;
      rotateDiv.css('transform', 'rotate(' + rotation + 'deg)');
  });
  
  $('#origin-btn').on('click', function() {
      rotateDiv.css('transform-origin', 'top right');
  });
  </code></pre>
  
  <p><br></p>
  
  <pre><code>&lt;button id="rotate-btn"&gt;1) Press To Rotate&lt;/button&gt;
  &lt;button id="origin-btn"&gt;2) Press To Change Transform Origin&lt;/button&gt;
  &lt;div id="container"&gt;
      &lt;div id="rotate-div"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>