title: CSS3 Matrix rotation
body: <p>I have a CSS 3D cube that I'm trying to rotate left/right/up/down straight as it appears to user. If I use css <code>rotation</code> functions, then I rotate the axis, not the cube.</p>
  
  <p>There are lots of articles on the web about X,Y,Z matrix rotation calculation, but I've spend days now trying to set this thing and none of this information really helps me.</p>
  
  <p>The work around to my problem would be a <code>WebKitCSSMatrix</code> object, which has its own rotation functions that work as magic. An example on Fiddle: <a href="http://jsfiddle.net/joecritch/tZBDW/" rel="noreferrer">http://jsfiddle.net/joecritch/tZBDW/</a>. But again, that relies only uppon Webkit, but I need to be crossbrowsy here.</p>
  
  <p>Now, there are 3 steps on the way of success:</p>
  
  <p>1) I need to get current matrix, set directional vector (1,0,0 for up/down and 0,1,0 for left/right rotations) and set the angle. DONE.</p>
  
  <p>2) I need to calculate new rotation vector based on current matrix. DONE.</p>
  
  <p>3) I need to actually rotate my current matrix by new vector and angle. PROBLEM.</p>
  
  <pre><code>var newMArray = deMatrix(".cube");//getting current matrix from CSS
  
  var v = [vecX, vecY, vecZ, 0];//current vector (1,0,0) or (0,1,0)
  
  var newV = newMVector(newMArray, v);//calculating new vector for current matrix
  
  //getting the angle for each axis based on new vector
  angleX = newV[0]*angle;
  angleY = newV[1]*angle;
  angleZ = newV[2]*angle;
  
  this.rotateX -= angleX;
  this.rotateY -= angleY;
  this.rotateZ -= angleZ; 
  
  //calculating the rotation matrix
  var rotationXMatrix, rotationYMatrix, rotationZMatrix, s, transformationMatrix;
  rotationXMatrix = $M([[1, 0, 0, 0], [0, Math.cos(this.rotateX * deg2rad), Math.sin(-this.rotateX * deg2rad), 0], [0, Math.sin(this.rotateX * deg2rad), Math.cos(this.rotateX * deg2rad), 0], [0, 0, 0, 1]]);
  rotationYMatrix = $M([[Math.cos(this.rotateY * deg2rad), 0, Math.sin(this.rotateY * deg2rad), 0], [0, 1, 0, 0], [Math.sin(-this.rotateY * deg2rad), 0, Math.cos(this.rotateY * deg2rad), 0], [0, 0, 0, 1]]);
  rotationZMatrix = $M([[Math.cos(this.rotateZ * deg2rad), Math.sin(-this.rotateZ * deg2rad), 0, 0], [Math.sin(this.rotateZ * deg2rad), Math.cos(this.rotateZ * deg2rad), 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]]);
  
  transformationMatrix = rotationXMatrix.x(rotationYMatrix).x(rotationZMatrix);//getting all axis rotation into one matrix
  </code></pre>
  
  <p>Than I'm setting new transformation matrix to my CSS Cube. The problem is - it doesn't rotate as it should. Now I'm using <code>Sylvester</code> plugin to do all matrix calculation.</p>
  
  <p>So, please help me on how to use my new vector for proper matrix rotation.</p>