12

I have obtained a CSS transform matrix of an element by using getComputedStyle() method as follows.

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

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

Is there a way to back calculate the transform matrix to get the original CSS rules ie. the values to translate , rotate, skew properties. I'm assuming it can be calculated by reversing the method used to form the matrix. P.S. - The values of transform properties are given in percentages, I want to back calculate these percentage values from the matrix.

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

Dan Philip Bejoy
  • 4,321
  • 1
  • 18
  • 33

1 Answers1

17

Yes, it's possible to do that!

The parameters to matrix come in this order: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Read more about it here

If you want to retrieve the numbers from that string (matrix(1,0,0,1,720,290) you could use this regex:

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

values = trans.match( numberPattern );

This will return the following array:

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

Edit after comments

The values returned in the window.getComputedStyle are the computed values (i.e. the percentages you used are being parsed to pixel values). You can reverse that calculation, but you need to know what the percentage is using to figure out how many pixels it should be.

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

if you use the following calculation, you should be able to get the percentages you used:

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;
Douwe de Haan
  • 6,247
  • 1
  • 30
  • 45
  • 2
    I dont want the values in the matrix . I want the values that i gave in CSS as translate, rotate and skew properties. – Dan Philip Bejoy Mar 28 '17 at 09:30
  • Could you post your CSS so I can see what values you are expecting to get back? – Douwe de Haan Mar 28 '17 at 09:32
  • 1
    For catching negative values, consider to use pattern: `/-?\d+/g;` – Denis L Jul 11 '19 at 18:23
  • This works great, however I ran into an edge-case; Safari often returns values with exponents ie `-2.544326192711535e-16`. The `numberPattern` regexp will split this into two matches like `[2.544326192711535, 16]` – Benjamin Jan 06 '20 at 15:06
  • 1
    @Benjamin You're totally right. I looked up what I could do to make it work, but I seem to need some more testing before I can update my answer. If you want to have some code that you could use, check [this post](https://stackoverflow.com/questions/638565/parsing-scientific-notation-sensibly) for some help guidance. – Douwe de Haan Jan 06 '20 at 15:15
  • @DouwedeHaan Thanks. For a quick fix I am using `style.transform.split(/matrix\(|,|\)/).filter(v => v !== '')` – Benjamin Jan 06 '20 at 15:37