How to convert a CSS transform matrix back to its component properties

I got the CSS element transformation matrix using the method getComputedStyle()as follows.

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

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

Is there a way back to calculate the transformation matrix to get the original CSS rules, i.e. Values ​​for translation, rotation, distortion of properties. I assume that this can be calculated by changing the method used to form the matrix. Postscript - The values ​​of the conversion properties are indicated as a percentage, I want to back-calculate these percentage values ​​from the matrix.

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

+7
source share
1 answer

, !

: 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-

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;
+10

Source: https://habr.com/ru/post/1673392/


All Articles