며칠 동안 이것을 정렬하려고했는데 CSS 행렬이 표준 그래픽 행렬과 다른지 또는 내가 뭔가 잘못되어있을 가능성이 있는지 잘 모르겠습니다.CSS 행렬 계산
저는 주로 X 축과 Y 축에서 회전하는 방법을 알아 내려고합니다. "transform : rotateX (2deg) rotateY (2deg) translate3d (0px, -100px, 0px);"를 사용할 때 " 그리고 자바 스크립트를 사용하여 매트릭스 스타일을 잡아 내고, 이것이 내가 출력 할 수있는 것입니다. 나는 몇 가지 숫자가 두 번째에 다른 동안 지금
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
를 얻을 수 (X와 Y 모두 2 개도 함께) 매트릭스 사용하여 자바 스크립트를 계산하려고하면
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
는하지만, 내가 하나를 믿고 번호가 문제의 원인입니다. 두 행렬에 대해 행 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가 범인이라는 나의 가정은 가능성 일 수있다. 그렇다면 어떻게 그걸 추적 할 수 있을까?