css-transforms - 计算两个重叠元素的变换原点

Question

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

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

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

我只是无法弄清楚到达那里的数学。我最接近找到答案的是this question，但它有点模糊，我不确定我是否完全理解答案本身。我将不胜感激，如果我遗漏了什么，我很乐意提供更多细节。

score 0 · Accepted Answer

折腾之后，我发现公式是：

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

1 回答 1