title: How to calculate the center of a rotated element, after resizing it
body: <p>I've already asked this <a href="https://stackoverflow.com/questions/40661059/rotate-a-resized-rectangle-with-svg-and-javascript">same question months ago</a>, but no one was able to answer me, even after making a <a href="http://embed.plnkr.co/fXT0kZcRwJTPb7wQVHpg/" rel="nofollow noreferrer">fully functional example on Plunker</a>, then, I am going to ask it again, and yes, I still have the same problem.</p>
  
  <p><strong>My problem</strong>: <em>find the centre of an element who have some rotation in it, after resizing it, to use it as the new pivot of rotation</em>.</p>
  
  <p>In my practical example, it is possible to see the problem in action; I have created two circles to show the problem better. After rotating and resizing the element, it's possible to see how the red and blue circles are apart from each other.</p>
  
  <p><strong>Blue Circle</strong>: the "correct" position of the centre, achieved by setting the cx/cy coordinates as the calculated element centre, plus, applying the transform rotate in it. The transform translates the circle to the correct position.</p>
  
  <p><strong>Red Circle</strong>: same as the blue circle, minus the transform rotate, these values are the ones used as the rotation pivot for the transform rotate().</p>
  
  <p>My assumptions until here: By applying the transform <code>rotate()</code> in the blue circle, I'm considering the rotation angle in the calculated centre, so all I have to do is replicate the matrix calculations made by the <code>rotate()</code> function. I'm already doing this with the four handles that the user can click to make a rotation, what could go wrong? </p>
  
  <p><strong>My goal</strong>: <em>Resize an element with rotation keeping the pivot of rotation in the centre</em>.</p>
  
  <p>I think <a href="https://gamedev.stackexchange.com/a/86784">this answer gave me some info</a>, the math here helped me with the rotation handles starting position, but still, I can't find the right way to calculate the new centre after the resize.</p>
  
  <p>The example was made using D3js + AngularJS v1. I work actively with both, but I am new to the geometry math world.</p>
  
  <p>Again, <a href="http://embed.plnkr.co/fXT0kZcRwJTPb7wQVHpg/" rel="nofollow noreferrer">this is the project on Plunker</a>.</p>