Javascript如何在使用转换矩阵数据时考虑转换原点

我试图找到转换元素的四个角。 但我目前只有一个元素的解决方案，将“变换原点”设置为0，0

我目前的步骤是：

使用

 var matrix=getComputedStyle(element).transform.

将元素转换设置为“无”

element.style.transform='none';

获取元素的未转换边界框

var box= element.getBoundingClientRect();

重新应用转换

使用变换矩阵重新创建未转换的矩形坐标

//2d only matrix example
 var x=(matrix[0]*point[0])+(matrix[2]*point[1])+matrix[4];
 var y=(matrix[1]*point[0])+(matrix[3]*point[1])+matrix[5];

您可以在这里看到一个测试用例

---

如何处理具有非0，0变换原点的元素？

变换原点属性与变换前的平移和变换后的反平移等效（或类似于，如果您喜欢这种方式）

在您的情况下，假设您有一个转换原点：10px 20px；和变换：旋转（20度）

这相当于

• 转换：转换（-10px-20px）
• 变换（在本例中为旋转，但使用矩阵）
• 转换：转换（10px 20px）

---

您可以使用旧方法执行此操作（开始时从x中减去10px，结束时添加10px），或者计算合成矩阵并在步骤中执行此操作

变换原点属性是等效的（或类似于，如果您喜欢此方法）转换前的翻译和转换后的反翻译

在您的情况下，假设您有一个转换原点：10px 20px；和变换：旋转（20度）

这相当于

• 转换：转换（-10px-20px）
• 变换（在本例中为旋转，但使用矩阵）
• 转换：转换（10px 20px）

---

你可以用老方法（开始时从x中减去10px，最后加上10px），或者计算合成矩阵，然后一步一个脚印地完成它

我想补充一点，我认为这是非常愚蠢的，浏览器不厌其烦地简化复杂的变换，然后不做简单的工作，让这些变换点可以读取。他们已经计算了变换矩阵，并给出了，为什么不转换角向量？为什么不读取

transform origin

CSS属性并说明偏移量？我想补充一点，我认为这是非常愚蠢的，浏览器会不厌其烦地促进复杂的转换，然后不做简单的工作，使这些转换点可以读取。他们已经计算了变换矩阵，并给了我们，为什么不转换角向量？为什么不读取

变换原点

CSS属性并说明偏移量？