Resize logic to maintain a fixed corner after rotate in javascript

Question

How to calculate or logic behind to get translate x & y while resize(with one fixed corner) after rotate.

Below image shows corner based resize

Answer 1

You could just set a transform-origin using CSS so you don't have to calculate the translate to compensate :

.box{transform-origin: 0 100% 0;}

Link to W3C doc

Example on jsfiddle