JavaScript get matrix transform from regular CSS and convert matrix2D to matrix3D

Question

I need to get the matrix transform from a regular CSS transform like this one: rotateX(10deg) rotateZ(10deg).

I know there is an existring solution for WebKit (WebKitCSSMatrix) but there is nothing like that for Firefox or IE...

So, I tried to get the matrix by setting the transform to an invisible (not in the DOM) and getting it with getComputedStyle but this method return nothing if the element is hidden or detached from the document.

Is there a good tutorial to convert values to Matrix ?

Then, how to convert a 2D matrix to a 3D ? from 6 to 16 values...

dreamlab · Accepted Answer · 2014-08-18 21:37:01Z

4

you can calculate the matrix yourself. this pages explains how to describe rotations as a 2D matrix: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Matrix.html

for a rotation this would be:

enter image description here

the matrix values can be accessed through these properties. the last row does not need to be modified for 2d. to initialize a matrix in css use: matrix(a,b,c,d,e,f)

matrix properties

for 3D matrices you can find a nice introduction here: http://www.eleqtriq.com/2010/05/understanding-css-3d-transforms/

than read about how to set up a matrix manually: http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

in both cases you will have to multiply several matrices if you want apply more than one transformation. information about how to do this can be found here: http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

edited Aug 18, 2014 at 21:37

answered Aug 18, 2014 at 16:21

dreamlab

3,38122 silver badges23 bronze badges

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

2 Comments

Jordan Over a year ago

In your picture, do vqlues represent m11, m21, m31, m12, m22, m32, m13, m23 and m33 ?

dreamlab Over a year ago

the m values are for 3d matrices. use properties a - f.

mk rowling · Accepted Answer · 2014-09-16 14:57:10Z

NOTE:
getComputedStyle method only work's for elements which are appended to your document

let's start with a function that make's a hidden element and append's it into your document :

var make_test_el = 
    function () {
        var el = document.createElement("div");

        // some browsers doesn't add transform styles if display is inline
        el.style.display = "block";

        // to be sure your element won't be shown 
        el.style.width = "0px";
        el.style.height = "0px";
        el.style.margin = "0px";
        el.style.padding = "0px";
        el.style.overflow = "hidden";

        document.body.appendChild(el);
        return el;
    }

then just use it by the following code:

var value = 'rotateX(10deg) rotateZ(10deg)'; // your readable value for transformation

var elem = make_test_el();

elem.style.transform = value;

// take your result and alert it 
var result = window.getComputedStyle(elem,null).transform;
alert(result);

//then remove appended element
elem.parentNode.removeChild(elem);

demo : http://jsfiddle.net/hbh7ypc9/1/

the result that you'll see maybe matrix3d(...) or matrix(...)
It depend's on browser's RenderEngine and the given value
for example:
IE10 will always give you matrix3d(...)
but for chrome and opera depend's on given value

but I've no idea about converting a 2D matrix to a 3D one
that's a question I've too
actually matrix values are really hard to understand
good luck...

Collectives™ on Stack Overflow

JavaScript get matrix transform from regular CSS and convert matrix2D to matrix3D

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related