StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS matrix calculation
text
Body
copied!<p>Been trying to sort this out for a few days and I am not sure if the CSS matrix is different from standard graphics matrices, or if I have something wrong (likely I have something wrong). </p> <p>I am primarily trying to figure out how to rotate on the X and Y axis. When I use "transform: rotateX(2deg) rotateY(2deg) translate3d(0px, -100px, 0px);" and I use javascript to grab the matrix style, this is what I am able to output.</p> <pre><code>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 </code></pre> <p>But if I try to calculate the matrix using javascript (with 2 degrees on both X and Y) I get</p> <pre><code> 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 </code></pre> <p>Now while several numbers are different in the second one, I believe one number is causing the problem. Note the numbers in row 1/column 2 and in row 2/column 1, for both matrices. The "-0.001217974870087876" looks to be switched. And if I understand how everything is calculated that is likely throwing off all the other numbers.</p> <p>Here's the code I am using to create the second matrix</p> <pre><code>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; } </code></pre> <p>My code is a bit verbose as I am just trying to learn how to work with the CSS matrix. But hopefully someone can help me get that one number into the right place.</p> <p><strong>Edit</strong> I hate to bump a post but I am running out of places to ask, so I am hoping a few more people will see it with a chance of getting an answer. I have tried every possible search to figure this out (unique questions don't get ranked very high in Google). I have probably read over 20 articles on working with matrices and they are yielding nothing. If I need to add more information please let me know. Also if there is a better place to ask let me know that as well. I would assume by now several people have looked at the code and the code must be ok, maybe my assumption that CSS is the culprit is a possibility, if so how does one track that down?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload