css-transforms - 计算两个重叠元素的变换原点
问题描述
我有一个图像(表示为绿色)覆盖一个框(表示为蓝色),并且图像transform: scale()
的大小将变大。发生这种情况时,我需要图像的所有边缘同时完成它们的转换。
为此,我需要transform-origin
使用 JavaScript 根据图像位于边界框上方的位置来计算。假设我知道getBoundingClientRect()
为这两个元素提供的所有坐标。
在下面的六个示例中,我在变换原点百分比应该相交的地方放置了一个红点。
我只是无法弄清楚到达那里的数学。我最接近找到答案的是this question,但它有点模糊,我不确定我是否完全理解答案本身。我将不胜感激,如果我遗漏了什么,我很乐意提供更多细节。
解决方案
折腾之后,我发现公式是:
(
(box.left - image.left) /
(image.width - box.width)
) * 100
推荐阅读
- heading - Apiary.io API 文档编辑器中的“介绍”和“参考”标题可以隐藏或修改吗?
- chisel - 为什么 DspContext 不能像 withNumAddPipes 这样工作?
- mysql - 使用 where in 子句 mysql 查询选择五个特定行和另一个随机行获取限制 10
- python - 返回所有任务不返回已完成的任务
- java - 如何将项目添加到选择后刷新的组合框?
- angular - 视图初始化后更改 ng bootstrap 活动选项卡
- kotlin - Kotlin继承:在序列化和反序列化到/从json之后对象不相等
- laravel - 如何为现有的 Laravel 应用创建公共 API 系统
- c# - 客户端评估
- android - 在我的情况下如何从活动转移到片段