C'è un plugin js per convertire il parametro matrix in css3 transform property?

Question

Supponiamo che io sono css3 trasformare stile:

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

quindi utilizzare jQuery ottenerlo stile:

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

mi restituire solo un numero di serie:

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

c'è un js plugin che potrebbe trasformare il numero della matrice nella trasformazione o passare dall'altra parte?

Answer 1

I numeri che si ottengono sono il risultato del moltiplicare le matrici di rotazione e traslazione.

Anche se per il tuo caso potresti ottenere facilmente facendo la matematica su carta e ottenendo le formule di cui hai bisogno a mano, per un numero crescente di termini sarebbe un compito tosto (devi conoscere la struttura dei trasforms originali in per invertire anche loro).

Ecco un link che vi aiuterà a:

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

Perché non è sufficiente impostare quelle valore desiderato dal codice Javascript e quindi eliminare necessità per loro geting da matrice a tutti?

Answer 2

devo trovare la buona soluzione, un buon plugin js:

jQuery Transit - CSS3 animations for jQuery

è molto bello, potrebbe ottenere o impostare tutti di trasformare proprietà

Answer 3

Fate questo:

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

È possibile scomporre i numeri in vari componenti. Ci sono due tecniche comuni per fare questo chiamato QR e LU in breve.

Se si alimentano i valori della matrice di corrente che si potrebbe fare:

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

Ora è possibile utilizzare l'oggetto ei suoi valori per impostare la rotazione, scala ecc

Vedi anche la mia transformation-matrix-js e Decomposition of 2D transform-matrices per più dettagli.