javascript - 如何将 CSS 变换矩阵转换回其组件属性

Question

我使用 getComputedStyle() 方法获得了一个元素的 CSS 变换矩阵，如下所示。

var style = window.getComputedStyle(elem1, null);
var trans = style.transform;

trans = matrix(1, 0, 0, 1, 1320, 290)

有没有一种方法可以反向计算变换矩阵以获得原始的 CSS 规则，即。平移、旋转、倾斜属性的值。我假设它可以通过反转用于形成矩阵的方法来计算。 附言- 转换属性的值以百分比形式给出，我想从矩阵中反向计算这些百分比值。

CSS 变换 - transform: translate(200%, 500%);

Answer 1

是的，这是可能的!

矩阵的参数顺序如下: 矩阵(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

阅读更多相关信息 here

如果您想从该字符串(矩阵(1,0,0,1,720,290)中检索数字，您可以使用此正则表达式:

style = window.getComputedStyle(elem1, null);
trans = style.transform;
numberPattern = /-?\d+\.?\d*/g;

values = trans.match( numberPattern );

这将返回以下数组:

["1", "0", "0", "1", "720", "290"]

评论后编辑

window.getComputedStyle 中返回的值是计算值(即您使用的百分比被解析为像素值)。您可以反转该计算，但您需要知道使用的百分比是多少才能计算出它应该是多少像素。

Enter CSS3 Transforms

One interesting thing about CSS transforms is that, when applying them with percentage values, they base that value on the dimensions of the element which they are being implemented on, as opposed to properties like top, right, bottom, left, margin, and padding, which only use the parent's dimensions (or in case of absolute positioning, which uses its closest relative parent). Source

如果你使用下面的计算，你应该能够得到你使用的百分比:

style = window.getComputedStyle(elem1, null);
trans = style.transform;
numberPattern = /-?\d+\.?\d+|\d+/g;

values = trans.match( numberPattern );

computedTranslateX = values[4];
computedTranslatey = values[5];

xPercentage = (computedTranslateX / elem1.offsetWidth) * 100;
yPercentage = (computedTranslateY / elem1.offsetHeight) * 100;