CODEWITHSUNDEEP
javascriptcssmatrix
Jordan
Jordan

Reputation: 3996

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

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...

Upvotes: 0

Views: 4554

Answers (2)

mk rowling
mk rowling

Reputation: 203


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...

Upvotes: 2

dreamlab
dreamlab

Reputation: 3361

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/

Upvotes: 4

Related Questions