javascript - Is there js plugin convert the matrix parameter to css3 transform property? - Stack Overflow

admin管理员组

文章数量:1021866

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

Share Improve this question Follow asked Mar 22, 2012 at 8:30 hh54188hh54188 15.7k3535 gold badges116116 silver badges192192 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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

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

Share Improve this question Follow asked Mar 22, 2012 at 8:30 hh54188hh54188 15.7k3535 gold badges116116 silver badges192192 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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

本文标签： javascriptIs there js plugin convert the matrix parameter to css3 transform propertyStack Overflow