How can I update the top left position after resizing a rotated object?

Question

I have an object that can be resized by any of its 4 sides as well as any of its 4 corners.

Now I'm trying to make it rotatable and I'm doing so with the CSS property translate: rotate(angle) , with the anchor being the center of the object.

The object has the properties top, left, width, height and angle.

The problem is that once it's rotated, if I need to resize it from the bottom-right corner for example, it doesn't maintain its top-left position while still keeping the center anchor point.

I need to find a way to maintain the top-left position by updating it, probably with some trigonometry.

 document.getElementById("button").addEventListener("click", function() { var obj = document.getElementById("object"); console.log(obj.style.top, obj.style.left); // 100, 100 obj.style.width = "200px"; obj.style.height = "200px"; // Something needs to be done here to update the top left position and keep it in place }); 

 div { position: absolute; top: 100px; left: 100px; width: 50px; height: 50px; background: red; transform-origin: 50% 50%; transform: rotate(20deg); } 

 <div id="object"></div> <button id="button">Resize bottom-right corner</button> 

I have a fiddle here

Answer 1

I assume you are trying to make it stay in place, so just add:

 obj.style.left = "25px"; obj.style.top = "25px"; 

after setting the height and width. To get the position, I saw you made it go from 50 to 200 pixels in size (4x increase) so I made it one fourth of original x/y putting it in the "same" spot.

Hope this helps! (codepen: http://codepen.io/JohnJ1101/pen/wJpJqE )