Make element behave same after css scaling

Question

I\'m manipulating divs with javascript all the time.

Sometimes I need to make those divs fit inside a container who\'s size is contantly changing.

One way to

Answer 1

The default transform-origin is 50% 50% (the middle of the element), so when you reduce the size of an element with scale, the edges are "retracted" from all sides towards the middle.

so the top left corner appears to move down and to the right. But if you set the transform-origin to 0% 0% (top left) only the right and bottom sides move.

Hope this helps!