CSS矩阵计算

Question

几天来，我一直试图解决这个问题，但我不确定CSS矩阵是否与标准图形矩阵不同，或者我是否有什么错误(可能我有什么错误)。

我主要是想弄清楚如何在X和Y轴上旋转。当我使用"transform: rotateX(2deg) rotateY(2deg) translate3d(0px，-100 0px，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计算矩阵(X和Y都有2度)，我就会得到

 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矩阵。但希望有人能帮我把那个号码拿到正确的地方。

编辑我不想撞到一个帖子，但我已经没有地方可以问了，所以我希望能有更多的人看到它，并有机会得到答案。我已经尝试了每一个可能的搜索，以找出这一点(独特的问题不会得到很高的排名在谷歌)。我可能读过20多篇关于使用矩阵的文章，但它们没有产生任何成果。如果我需要增加更多的信息，请告诉我。另外，如果有更好的地方问，也让我知道。我认为到现在为止，已经有几个人看过这些代码，而且代码肯定没问题，也许我认为CSS是罪魁祸首的假设是有可能的，如果是这样的话，如何跟踪它呢？

Answer 1

看看此页，它解释了CSS3dMatrix是如何工作的。另外，这里在CSSMatrix对象的JS中有一个实现，非常类似于WebKitCSSMatrix，它已经包含在您的(webkit)浏览器中供您使用。