title: How to maintain fixed corner while resize a DIV element after rotate
body: <p>Working in HTML div to <strong>rotate and resize with Javascript</strong>.</p>
  
  <p><strong>Sample image:</strong>
  <a href="https://i.stack.imgur.com/ls3se.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ls3se.png" alt="enter image description here"></a></p>
  
  <p>I can't able to make a <strong>corner remains fixed</strong> while resize after rotate.</p>
  
  <p>Possible duplicates are:</p>
  
  <p><a href="https://stackoverflow.com/questions/46827557/how-to-calculate-translate-x-and-y-value-when-resize-after-rotate">How to calculate translate x and y value when resize after rotate..?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/46851386/resize-logic-to-maintain-a-fixed-corner-after-rotate-in-javascript">Resize logic to maintain a fixed corner after rotate in javascript</a></p>
  
  <p><a href="https://stackoverflow.com/questions/46931697/how-to-resize-with-fixed-corner-after-rotate">How to resize with fixed corner after rotate?</a></p>
  
  <p>No use for me from the above link.</p>
  
  <p>I need a similar functionality like <a href="http://embed.plnkr.co/fXT0kZcRwJTPb7wQVHpg/" rel="nofollow noreferrer">this</a> one, but its svg. I need <strong>this with div elements</strong>, not for svg.</p>
  
  <p>I checked too more links like <a href="https://gamedev.stackexchange.com/questions/86755/how-to-calculate-corner-positions-marks-of-a-rotated-tilted-rectangle/86784">this</a> one, those are only used to find corner positions after rotate, but <strong>after finding this how to set corner fixed while resize..?</strong></p>
  
  <p>What is the step by step procedure to maintain opposite corners fixed when resize after rotate..?</p>
  
  <p>I used one <a href="http://jsfiddle.net/arunvalaven/v8qoLj76/34/" rel="nofollow noreferrer">sample code</a> for reference to understand by need, but i achieved center based resize after rotate, i can't add all the codes. I can resize with corner fixed with <code>0 deg</code> and <code>360 deg</code>, but i need fixed corner with all others angles.</p>
  
  <p><strong>Note:</strong> To maintain fixed corner after rotate <a href="https://www.canva.com" rel="nofollow noreferrer">Canva</a> and <a href="https://www.powtoon.com/account/login/" rel="nofollow noreferrer">Powtoon</a> made some adjustments in <code>translate(x,y)</code> => by Canva and <code>left</code>,<code>top</code> => by Powtoon.</p>