Javascript 在发生之前，使用css matrix3d转换计算元素边界矩形

所以我试图制作一个滚动函数，它使用matrix3d转换滚动上的元素。在转换发生后，我试图计算元素的最终位置时遇到了一个问题

我需要知道转换会增加多少高度

现在我只是将css矩阵x3d的1和5的值乘以元素高度，然后除以2，再加上矩阵的13的值。像这样：

let a = Math.abs((matrix[1] * rect.height) / 2);
let b = Math.abs(((matrix[5] - 1) * rect.height) / 2);
const c = matrix[13];
return a + b + c;

这适用于除旋转之外的所有情况，这对我来说也很难理解

我的问题是，我有结束矩阵值和初始元素边界rect。是否有方法计算由于矩阵变换被添加到元素中而导致的元素结束边界rect。

这把小提琴在视觉上更好地展示了我的要求

假设我有下面的矩阵，它将倾斜：40度，scaley:1.5，translateY:300，translateX:200，rotateZ:140度

[-0.766044, 0.321394, 0, 0, -0.642788, -1.688429, 0, 0, 0, 0, 1, 0, 200, 300, 0, 1]

以及起始位置为rect的元素：

x: 100
y: 600
width: 100
height: 100
top: 600
right: 120
bottom: 700
left: 100

在添加以下转换后，如何判断元素将在哪里结束

matrix3d（-1，-0.8391,0,0,0,0，-1.5,0,0,0,0,0,1,0,200,300,0,1）

---

任何帮助都将不胜感激。

看看这个答案：这种方法可行吗：

getBoundingClientRect

在转换之前，转换，

getBoundingClientRect

在所述转换之后，将其转换回其原始状态？@Richard这是一种可行的方法，我只是对性能不太确定。我们正在使用转换，所以它不应该对页面造成太多的干扰，但我没有任何东西可以比较性能，因为我不知道如何计算结束矩阵，否则将其与之进行比较。通常的方法是使用一个对象或任何东西，然后只转换OBB（4点）然后快速准确地得到结果……看看这个答案：这个方法可行吗：

getBoundingClientRect

在转换之前，转换，

getBoundingClientRect

在所述转换之后，将其转换回其原始状态？@Richard这是一个可行的方法，我只是对性能不太确定。我们正在使用转换，所以它不应该对页面造成太多的干扰，但我没有任何东西可以比较性能，因为我不知道如何计算结束矩阵，否则将其与之进行比较。通常的方法是使用一个对象或任何东西，然后只转换OBB（4点）并准确快速地得到结果。。。