How to read/parse individual transform style values in JavaScript?

Question

Webkit\'s blog post from last year on 3D transforms explains the various transform \'functions\' that can be used in the -webkit-transform property. For example:

<         


        

Answer 1

Just because I didn´t see any working Javascript one Line solutions to convert the matrix code, here is mine. Quick and easy:

First get all the transform Values in a matrix:

var yourDivsCssValues= window.getComputedStyle(yourDiv, null);
transformValues = testDivCSS.getPropertyValue('transform');

To extract transform-y as an Integer:

var transformValueY = parseInt((yourVariable1.replace (/,/g, "")).split(" ")[5]);

To extract transform-x as an Integer:

var transformValuetX = parseInt((yourVariable2.replace (/,/g, "")).split(" ")[4]);

Accessing the rotation value is quite difficult, but there is a good guide, if you want to do it: https://css-tricks.com/get-value-of-css-rotation-through-javascript/