How to reverse-engineer a webkit matrix3d transform

Question

I've got a cube element being rotated and translated in a 3d space.

I want to find out just the rotateY portion of this transform at a given time. Is this possible?

I have:

var cube = document.getElementById("cube");
var transform = getComputedStyle(cube).webkitTransform;

//the value of transform is:
// matrix3d(-1, 0, 0.00000000000000012246467991473532, 0, 
//           0, 1, 0, 0, 
//          -0.00000000000000012246467991473532, 0, -1, 0, 
//           0, 0, 0, 1)

Help? :-)

Answer 1

If your object is only being rotated about Y, then yes, the rotation is simple to calculate - it's the arccos of Matrix elements 1,1 or 3,3 or the arsin of -(element 3,1) or arcsin of element 1,3. In your specific example, it's about 180 degrees. If the rotations are about more than just the y axis, then you have to start tracking previous rotations and it can get messier.

Your translation will just be the bottom row of the output matrix, 0,0,0 in this case.

See examples on http://www.inversereality.org/tutorials/graphics%20programming/3dwmatrices.html