是否有js插件將矩陣參數轉換爲css3轉換屬性？

Question

假設我有CSS3變換風格：

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

然後使用jQuery得到它的風格：

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

只還給我了一系列數字：

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

有一個js插件可以將矩陣數字轉換爲變換？或轉向另一邊？

Answer 1

您得到的數字是旋轉和平移矩陣相乘的結果。

儘管對於您的情況，您可以通過在紙面上進行數學計算並獲得需要的公式來輕鬆獲取，但對於增加的術語數量來說，這將是一項艱鉅的任務（您需要知道原始轉換的結構爲了扭轉它們）。

這裏有一個鏈接，這將有助於你：

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

爲什麼不設置那些你從Javascript代碼需要，因此無需使用來自矩陣歌廳他們在所有的價值呢？

Answer 2

我已經找到了很好的解決方案，一個不錯的js插件：

jQuery Transit - CSS3 animations for jQuery

這是非常不錯的，可以獲取或設置所有變換的財產

Answer 3

這樣做：

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

您可以將數字分解回各種組件。有兩種常用的技術可以做到這一點，稱爲QR和LU。

如果你給它當前的矩陣值，你可以這樣做：

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

現在你可以使用該對象和它的值來設置旋轉，縮放等

參見我transformation-matrix-js和Decomposition of 2D transform-matrices爲更多細節。