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

Question

我通过使用getComputedStyle()如下方法获得了元素的CSS变换矩阵.

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

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

有没有办法重新计算变换矩阵以获得原始CSS规则,即.要转换,旋转,倾斜属性的值.我假设它可以通过反转用于形成矩阵的方法来计算.PS - 转换属性的值以百分比给出,我想从矩阵中反算出这些百分比值.

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

Answer 1

是的,有可能做到这一点!

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

在这里阅读更多相关信息

如果要从该字符串中检索数字(矩阵(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中返回的值是计算值(即您使用的百分比被解析为像素值).您可以反转该计算,但您需要知道百分比用于确定应该有多少像素.

输入CSS3 Transforms

关于CSS变换的一个有趣的事情是,当使用百分比值应用它们时,它们将该值基于它们正在实现的元素的维度,而不是像top,right,bottom,left,margin和padding这样的属性. ,仅使用父级的维度(或者在绝对定位的情况下,使用其最接近的相对父级). 资源

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

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;

小数点评后编辑

您可以使用不同的正则表达式来包含小数.

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

values = trans.match( numberPattern );