CSS矩陣計算

Question

一直試圖對此進行排序幾天，我不確定CSS矩陣是否與標準圖形矩陣不同，或者如果我有什麼問題（可能是我有問題）。

我主要想弄清楚如何在X和Y軸上旋轉。當我使用「transform：rotateX（2deg）rotateY（2deg）translate3d（0px，-100px，0px）;」我使用javascript來獲取矩陣樣式，這是我能夠輸出的。

0.9993908270190958, -0.001217974870087876, -0.03487823687206265, 0, 
0,     0.9993908270190958, -0.03489949670250097, 0, 
0.03489949670250097, 0.03487823687206265, 0.9987820251299122, 0, 
0,     -99.93908270190957,  3.489949670250097, 1 

但是，如果我嘗試計算使用矩陣的JavaScript（與2度在X和Y）我得到

0.9993908270190958, 0,     -0.03489949670250097, 0, 
-0.001217974870087876, 0.9993908270190958, -0.03487823687206265, 0, 
0.03487823687206265, 0.03489949670250097, 0.9987820251299122, 0, 
0.1217974870087876, -99.93908270190957,  3.487823687206265, 1 

現在雖然幾個數字是在第二個不同，我相信一個數量正在造成問題。請注意兩個矩陣的第1行/第2列和第2行/第1列中的數字。 「-0.001217974870087876」看起來被切換。如果我瞭解如何計算一切，那很可能會拋棄所有其他數字。

下面是我使用以創建第二個矩陣代碼

var basematrix = [ 
    [1, 0, 0, 0], 
    [0, 1, 0, 0], 
    [0, 0, 1, 0], 
    [0, -100, 0, 1] 
]; 
function RotateWorld(y, x) 
{ 
    var halfrot = Math.PI/180; 

    var xcos = Math.cos(x * halfrot); 
    var xsin = Math.sin(x * halfrot); 

    var ycos = Math.cos(y * halfrot); 
    var ysin = Math.sin(y * halfrot); 

    var ymatrix = [ 
     [ycos, 0, -ysin, 0], 
     [0, 1, 0, 0], 
     [ysin, 0, ycos, 0], 
     [0, 0, 0, 1] 
    ]; 

    var xmatrix = [ 
     [1, 0, 0, 0], 
     [0, xcos, xsin, 0], 
     [0, -xsin, xcos, 0], 
     [0, 0, 0, 1] 
    ]; 

    var calcmatrix = MatrixMultiply(ymatrix, basematrix); 

    calcmatrix = MatrixMultiply(xmatrix, calcmatrix); 

    calcmatrix = TransMultiply(calcmatrix); 

    for (var i = 0; i < 4; i++) 
    { 
     for (var j = 0; j < 4; j++) 
     { 
      document.getElementById('info').innerHTML += calcmatrix[i][j] + ', '; 
     } 
    } 
} 

function MatrixMultiply(matrixa, matrixb) 
{ 
    var newmatrix = []; 
    for (var i = 0; i < 4; ++i) 
    { 
     newmatrix[i] = []; 
     for (var j = 0; j < 4; ++j) 
     { 
      newmatrix[i][j] = matrixa[i][0] * matrixb[0][j] 
        + matrixa[i][1] * matrixb[1][j] 
        + matrixa[i][2] * matrixb[2][j] 
        + matrixa[i][3] * matrixb[3][j]; 
     } 
    } 

    return newmatrix; 
} 
function TransMultiply(matrix) 
{ 
    var newmatrix = matrix; 
    var x = matrix[3][0]; 
    var y = matrix[3][1]; 
    var z = matrix[3][2]; 
    var w = matrix[3][3]; 

    newmatrix[3][0] = x * matrix[0][0] + y * matrix[1][0] + z * matrix[2][0]; 
    newmatrix[3][1] = x * matrix[0][1] + y * matrix[1][1] + z * matrix[2][1]; 
    newmatrix[3][2] = x * matrix[0][2] + y * matrix[1][2] + z * matrix[2][2]; 
    newmatrix[3][3] = x * matrix[0][3] + y * matrix[1][3] + z * matrix[2][3] + newmatrix[3][3]; 
    if (newmatrix[3][3] != 1 && newmatrix[3][3] != 0) 
    { 
     newmatrix[3][0] = x/w; 
     newmatrix[3][1] = y/w; 
     newmatrix[3][2] = z/w; 
    } 
    return newmatrix; 
} 

我的代碼是一個有點冗長，因爲我只是想學習如何使用CSS矩陣工作。但希望有人能幫我把這個號碼放到正確的位置。

編輯 我討厭碰到一個職位，但我跑出來的地方要問，所以我希望多幾個人會看到它得到答案的機會。我嘗試了所有可能的搜索來解決這個問題（獨特的問題在Google中排名不高）。我可能讀過20篇關於使用矩陣的文章，而且他們什麼也沒有。如果我需要添加更多信息，請告訴我。此外，如果有更好的地方，請讓我知道。我現在假設有幾個人看過代碼，代碼一定沒問題，也許我認爲CSS是罪魁禍首的假設是可能性，如果是這樣的話，那麼人們如何追蹤？

Answer 1

看看this page，它解釋了css 3dmatrix的工作原理。另外here您在CSSMatrix對象的JS中實現了一個實現，它非常類似於已經包含在您的（webkit）瀏覽器中供您使用的WebKitCSSMatrix。

Answer 2

你有一個錯誤在你執行function TransMultiply(matrix) { .. }

var newmatrix = matrix; 

那不是你的克隆矩陣，這是設置newmatrix指原來的矩陣！任何使用這種方法的東西都會讓原始矩陣和新矩陣混淆。你可能想使用它創建新的4x4 matricies，就像一個方法：

function new4x4matrix(){ 
    return [[0, 0, 0, 0], 
      [0, 0, 0, 0], 
      [0, 0, 0, 0], 
      [0, 0, 0, 0]]; 
} 

，然後無論你需要一個新的矩陣，這樣做：

var newmatrix = new4x4matrix(); 

編輯：ERR ，但實際上您可能需要克隆方法：很好。

function cloneMatrix(matrixa) 
{ 
    var newmatrix = []; 
    for (var i = 0; i < 4; ++i) 
    { 
     newmatrix[i] = []; 
     for (var j = 0; j < 4; ++j) 
     { 
      newmatrix[i][j] = matrixa[i][j]; 
     } 
    } 

    return newmatrix; 
} 

，而是爲TransMultiply做：

var newmatrix = cloneMatrix(matrix);