get css transform 3D from matrix3d

3
votes

I search over existing stacks and answer and the web but I dont find any correct and working solution.

I want to get human readable css 3d transformations (rotateX, rotateY, rotateZ, translateX, translateY, translateZ, scaleX, scaleY and scaleZ) with the matrix3D.

Any one can explain the way (or a correct and verified source, anyway) to do that ?

I am not a Math friendly but I am ready to do my best to understand.

Thanks by advance !

Jo

2
cssmathmatrix3d
i do not think it is possibl , i believe browser compile all transform value into one matrix value to render the CSS. At least this is a matrix value that you retrieve from javascript , and there is no way to find out what values of transform where used in the first place. you could have different value of scale and skew mixed for same result at screen for instance – G-Cyrillus
So, there is no way to add 1deg to rotateX... ? – Jordan
See my answer and play with demo :) – G-Cyrillus

2 Answers

1
votes

What you are searching for is called "decomposing a matrix". For a 3d-matrix you have to consider the order of the rotations (e.g. Euler-XYZ, or ZXY). Take a look at: some Matrix3D code written in TypeScript. Take a look at the decompose() method.

E.g. extract scaling (column major):

var scaleX = Math.sqrt(this.m11 * this.m11 + this.m12 * this.m12 + this.m13 * this.m13);
var scaleY = Math.sqrt(this.m21 * this.m21 + this.m22 * this.m22 + this.m23 * this.m23);
var scaleZ = Math.sqrt(this.m31 * this.m31 + this.m32 * this.m32 + this.m33 * this.m33);
0
votes

okay. matrix values could go like this :

    matrix( 
        scalex, 
        mix of skewy and rotate, 
        mix of skewx and rotate, 
        scaley, 
        move-left, 
        move-top  
    );

If you can easily rescale or move an element updating by hand a matrix value, it turns to be tricky and need calculation for the value 2 and 3 . here an example to play with

See : http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/ or https://developer.mozilla.org/en-US/docs/Web/CSS/transform