title: CSS matrix calculation
body: <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 &lt; 4; i++)
      {
          for (var j = 0; j &lt; 4; j++)
          {
              document.getElementById('info').innerHTML += calcmatrix[i][j] + ', ';
          }
      }
  }
  
  function MatrixMultiply(matrixa, matrixb)
  {
      var newmatrix = [];
      for (var i = 0; i &lt; 4; ++i)
      {
          newmatrix[i] = [];
          for (var j = 0; j &lt; 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 &amp;&amp; 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>