如何将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

是的，可以这样做！

矩阵的参数按此顺序排列： matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

详细了解here

如果要从该字符串中检索数字（矩阵（1,0,0,1,720,290），您可以使用此正则表达式：

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

values = trans.match( numberPattern );

这将返回以下数组：

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

评论后编辑

window.getComputedStyle中返回的值是计算值（即您使用的百分比被解析为像素值）。您可以反转该计算，但您需要知道百分比用于确定应该有多少像素。

  

输入CSS3转换

     

CSS转换的一个有趣的事情是，当使用百分比值应用它们时，它们将该值基于它们正在实现的元素的维度，而不是像top，right，bottom，left，margin这样的属性。和padding，它只使用父级的维度（或者在绝对定位的情况下，使用其最接近的相对父级）。    Source

如果您使用以下计算，您应该能够获得您使用的百分比：

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

values = trans.match( numberPattern );

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

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

小数点评后编辑

您可以使用其他正则表达式来包含小数。

numberPattern = /\d+\.?\d+|\d+/g;