¿Hay un plugin js que convierta el parámetro de matriz a la propiedad de transformación css3?

Question

Supongamos que tengo transformar css3 estilo:

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

entonces utilizar jQuery conseguirlo estilo:

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

sólo me devuelve un número de serie:

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

¿Hay un js un complemento que podría convertir el número de la matriz en la transformación? ¿O pasar al otro lado?

Answer 1

Los números que obtiene son el resultado de multiplicar las matrices de rotación y traducción.

Aunque para su caso podría pasar fácilmente haciendo los cálculos en papel y obteniendo las fórmulas que necesita a mano, para aumentar el número de términos sería una tarea alegre (necesita conocer la estructura de las transformaciones originales en para invertirlos también).

Aquí hay un enlace que le ayudará a:

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

Por qué no acaba de establecer dichos valores que necesita de código Javascript y por lo tanto eliminar la necesidad de que consigue a partir de la matriz en absoluto?

Answer 2

Tengo encontrar la buena solución, un buen complemento JS:

jQuery Transit - CSS3 animations for jQuery

es muy agradable, podría obtener o establecer toda la propiedad transform

Answer 3

Haga lo siguiente:

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

Answer 4

Puede descomponer los números en varios componentes. Hay dos técnicas comunes para hacer esto llamadas QR y LU, para abreviar.

Si le da de comer a los valores de la matriz actual que podría hacer:

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 
    }; 
} 

Ahora puede utilizar el objeto y sus valores para definir rotar, escalar, etc.

Véase también mi transformation-matrix-js y Decomposition of 2D transform-matrices de más detalles.