JavaScript从常规CSS获取矩阵转换并将matrix2D转换为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...

Answer 1

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:

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)

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/

Answer 2

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