get css transform 3D from matrix3d

Question

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

Answer 1

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);

Answer 2

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