Question

试图将它排序几天，我不确定CSS矩阵是否与标准图形矩阵不同，或者我是否有错误（可能是我有问题）。

我主要是想弄清楚如何在X和Y轴上旋转。当我使用＆＃34; transform：rotateX（2deg）rotateY（2deg）translate3d（0px，-100px，0px）;＆＃34;并且我使用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列中的数字。＆＃34; -0.001217974870087876＆＃34;看起来要切换。如果我理解如何计算一切可能会丢掉所有其他数字。

这是我用来创建第二个矩阵

的代码

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

看一下this page，它解释了css 3dmatrix的工作原理。另外here你在JSMatrix对象的JS中有一个实现，非常类似于WebKitCSSMatrix，它已经包含在你的（webkit）浏览器中供你使用。

Answer 2

您在实施function TransMultiply(matrix) { .. }

时遇到错误

var newmatrix = matrix;

那不是克隆你的矩阵，那就是设置newmatrix来引用你的原始矩阵！任何使用此方法的东西都会使原始矩阵和新矩阵混乱。您可能希望使用创建新的4x4基质的方法，例如：

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

然后在需要新矩阵的地方，执行： <击>

<击>

var newmatrix = new4x4matrix();

<击>

编辑：错误，但您可能确实需要克隆方法：很好。

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

CSS矩阵计算

2 个答案: