CODEWITHSUNDEEP
javascriptcssmatrixtransform
hh54188
hh54188

Reputation: 15626

Is there js plugin convert the matrix parameter to css3 transform 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?

Upvotes: 8

Views: 3062

Answers (4)

user1693593
user1693593

Reputation:

You can decompose the numbers back into various components. There are two common techniques to do this called QR and LU for short.

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

function decompose(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 decomposition.
        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 Decomposition of 2D transform-matrices for more details.

Upvotes: 1

Oriol
Oriol

Reputation: 12650

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

Upvotes: 0

hh54188
hh54188

Reputation: 15626

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

Upvotes: -1

Alex
Alex

Reputation: 933

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.com/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?

Upvotes: 1

Related Questions