0

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.

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.

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.

Jody Heavener
  • 2,704
  • 5
  • 41
  • 70

1 Answers1

0

After fiddling around, I figured out the formula is:

(
  (box.left - image.left) /
  (image.width - box.width)
) * 100
Jody Heavener
  • 2,704
  • 5
  • 41
  • 70