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

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
– G-Cyrillus, Commented Apr 18, 2014 at 12:12

jbenker · Accepted Answer · 2017-07-04 22:18:24Z

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

edited Jul 4, 2017 at 22:18

answered Aug 13, 2015 at 1:01

jbenker

2461 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jordan Over a year ago

Woaw! Many time after! :) I finally decided to buy a book and create my own javascript matrix library especially for CSS 3D transforms (search 'Jo.matrix =' around line 5300) github.com/JordanDelcros/Jo/blob/master/jo/jo.js But your answer is the right one.

JoelBonetR Over a year ago

i think Franklin TA did something like this long time ago: franklinta.com/2014/09/08/computing-css-matrix3d-transforms

G-Cyrillus · Accepted Answer · 2014-04-18 13:59:34Z

0

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

edited Apr 18, 2014 at 13:59

answered Apr 18, 2014 at 13:53

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

4 Comments

Jordan Over a year ago

Ok, i understand for a 2D matrix. But for 3D ?

G-Cyrillus Over a year ago

@Jordan it is in dev.opera article use this syntax : example transform: matrix3d(1, -0.2, 0.2, 0.01, 0.01, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); but you still need to use transform-style and perspective to emulate 3d at screen : example : codepen.io/gc-nomade/pen/FHmLI (last one)

G-Cyrillus Over a year ago

hello, @Jordan mozilla says ... matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

Jordan Over a year ago

Ok, but how to convert a matrix3d to a css transform style like "rotateX(10deg) rotateY(20deg) rotateZ(120deg)" ?

Collectives™ on Stack Overflow

get css transform 3D from matrix3d

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related