Js plugin convert matrix parameter to css3 transform property?

Question

Suppose I have a css3 conversion 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')); 

he returns me only the series number:

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

Is there a js plugin that can turn a matrix number into a transform? Or go to the other side?

Answer 1

The numbers you get are the result of multiplying the rotation and translation matrices.

Despite the fact that for your business you could easily get the math on paper and get the formulas you need manually, to increase the number of terms this will be an hour-long task (you need to know the structure of the original trasforms, so and vice versa).

Here is a link to help you:

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

Why not just set these values ​​from Javascript code and therefore eliminate the need to get them from the matrix?

Answer 2

Do it:

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

More details ...

Answer 3

You can decompose numbers into different components. There are two common methods: short circuit to QR and LU.

If you load the current matrix values ​​that 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 rotation, scale, etc.

See also my transformation-matrix-js and Decomposition of a 2D matrix transformation for more details.

Answer 4

I found a good solution, a good js plugin:

jQuery Transit - CSS3 Animation for jQuery

It is very nice, can get or set all transform property