calculate new left and top when scaling on rotated div

Question

I've this div, in an absolute position

 div { position:absolute; width:100px; height:100px; left: 30px; top: 30px; background-color:red; -ms-transform: rotate(40deg); /* IE 9 */ -ms-transform-origin: 50% 50%; /* IE 9 */ -webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */ -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */ transform: rotate(40deg); transform-origin: 50% 50%; z-index:1; } div.resized { width: 200px; background-color:blue; z-index:2; } 

 <div></div> <div class="resized"></div> 

Now, when I set its width to be 200px, the top and the left moves up and aside from its original point.

can someone please tell me how do I calculate the distance of this movement?

Answer 1

If you want the pivot point to be the top left, you should set your transform-origin accordingly.

Change your existing

transform-origin: 50% 50%;

to

transform-origin: left top;

You'll need to rearrange the positioning a bit to get a similar effect to the one presented in your original snippet, but now the rotation should work as you expected.

 div { position:absolute; width:100px; height:100px; left: 30px; top: 30px; background-color:red; -ms-transform: rotate(40deg); /* IE 9 */ -ms-transform-origin: 50% 50%; /* IE 9 */ -webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */ -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */ transform: rotate(40deg); transform-origin: left top; z-index:1; } div.resized { top: 0; left: 0; width: 200px; background-color:blue; z-index:2; } 

 <div></div> <div class="resized"></div>