计算两个重叠元素的变换原点答案

【问题标题】：Calculating transform-origin of two overlapping elements计算两个重叠元素的变换原点
【发布时间】：2018-07-03 05:30:22
【问题描述】：

我有一个图像（表示为绿色）覆盖了一个框（表示为蓝色），并且该图像的大小将为transform: scale()ing。发生这种情况时，我需要图像的所有边缘同时完成它们的转换。

为此，我需要使用 JavaScript 根据图像在边界框上方的位置计算transform-origin。假设我知道getBoundingClientRect() 为这两个元素提供的所有坐标。

在下面的六个示例中，我在变换原点百分比应相交的位置放置了一个红点。

我只是无法计算出到达那里的数学。我最接近找到答案的是this question，但它有点含糊，我不确定我是否完全理解答案本身。非常感谢您对此的帮助，如果我遗漏了什么，我很乐意提供更多详细信息。

【问题讨论】：

【解决方案1】：

折腾了一下，发现公式是：

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

【讨论】：