Suppose I have css3 transform style:

img
{
   -webkit-transform:rotate(10deg) translate(100px,20px);
   -moz-transform:rotate(10deg) translate(100px,20px);
}

then I use jquery get it style:

console.log($('#clone').css('-moz-transform'));

it only return me a series number:

matrix(0.984808, 0.173648, -0.173648, 0.984808, 95.0078px, 37.061px)

Is there a js plugin which could turn the matrix number to the transform?Or turn to the other side?

Suppose I have css3 transform style:

img
{
   -webkit-transform:rotate(10deg) translate(100px,20px);
   -moz-transform:rotate(10deg) translate(100px,20px);
}

then I use jquery get it style:

console.log($('#clone').css('-moz-transform'));

it only return me a series number:

matrix(0.984808, 0.173648, -0.173648, 0.984808, 95.0078px, 37.061px)

Is there a js plugin which could turn the matrix number to the transform?Or turn to the other side?

• javascript
• css
• matrix
• transform

4 Answers 4

Numbers you're getting are the result of multiplying Rotation and Translation matrices.

Although for your case you could get by easily by doing the math on paper and getting the formulas you need by hand, for increasing number of terms it would be a teadious task (you need to know the structure of original trasforms in order to reverse them as well).

Here's a link that will help you:

http://www.useragentman./blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

Why not just set those value you need from Javascript code and therefore eliminate need for geting them from matrix at all?

You can depose the numbers back into various ponents. There are two mon techniques to do this called QR and LU for short.

If you feed it the current matrix values you could do:

function depose(a, b, c, d, e, f, useLU) {

    var acos = Math.acos, // caching for readability below
        atan = Math.atan,
        sqrt = Math.sqrt,
        pi   = Math.PI,

        translate = {x: e, y: f},
        rotation  = 0,
        scale     = {x: 1, y: 1},
        skew      = {x: 0, y: 0},

        determ = a * d - b * c;   // get determinant

    if (useLU) {
        if (a) {
            skew =  {x: atan(c / a), y: atan(b / a)};
            scale = {x: a,           y: determ / a};
        }
        else if (b) {
            rotation = pi * 0.5;
            scale    = {x: b, y: determ / b};
            skew.x   = atan(d / b);
        }
        else { // a = b = 0
            scale  = {x: c, y: d};
            skew.x = pi * 0.25;
        }
    }
    else {
        // Apply the QR-like deposition.
        if (a || b) {
            var r = sqrt(a*a + b*b);
            rotation = b > 0 ? acos(a / r) : -acos(a / r);
            scale    = {x: r, y: determ / r};
            skew.x   = atan((a*c + b*d) / (r*r));
        }
        else if (c || d) {
            var s = sqrt(c*c + d*d);
            rotation = pi * 0.5 - (d > 0 ? acos(-c / s) : -acos(c / s));
            scale    = {x: determ/s, y: s};
            skew.y   = atan((a*c + b*d) / (s*s));
        }
        else { // a = b = c = d = 0
            scale = {x:0, y:0};     // = invalid matrix
        }
    }

    return {
        scale    : scale,
        translate: translate,
        rotation : rotation,
        skew     : skew
    };
}

Now you can use the object and its values to set rotate, scale etc.

See also my transformation-matrix-js and Deposition of 2D transform-matrices for more details.

Do this:

// Grab current rotation position
var  $img,
     position;

$img = $('img');

position = $img.css('-webkit-transform') || $img.css('-moz-transform') || $img.css('-ms-transform') || $img.css('-o-transform') || $img.css('transform');

position = position.split('(')[1].split(')')[0].split(',');

// Concert matrix to degrees value
position = Math.round(Math.atan2(position[1], position[0]) * (180/Math.PI));

See Demo

Learn more

I have find the good solution ,a good js plugin:

jQuery Transit - CSS3 animations for jQuery

it's very nice,could get or set all transform's property