Calculating transform-origin of two overlapping elements

I have an image (represented as green) overlaying a box (represented as blue), and the image is going to be transform: scale()ing in size. When this happens I need all edges of the image to complete their transformation at the same time.

transform: scale()

To do this I need to calculate the transform-origin based on where the image is located overtop of the bounding box, using JavaScript. Assume I know all the coordinates that getBoundingClientRect() provides, for both elements.

transform-origin

getBoundingClientRect()

In the six examples below I’ve placed a red dot where the transform-origin percentages should intersect.

I just can’t figure out the math to get there. The closest I've come to finding an answer is with this question, but it's a little vague and I'm not sure I fully understand the answer itself. I would greatly appreciate help with this, and will happily provide more details if I'm missing something.

1 Answer
1

After fiddling around, I figured out the formula is:

(
(box.left - image.left) /
(image.width - box.width)
) * 100


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.