CSS matrix3d计算不正确，但是为什么呢？

Question

I have the following JSFiddle http://jsfiddle.net/3vf9J/ which highlights my issue.

I've followed a guide on how to make a function to combine css transforms into a matrix3d so I can apple more than one at a time.

Unfortunately I've failing to make it work properly. A simple rotation of 180 degrees about one axis, ends up looking more like 135 degrees, so I've clearly got some maths wrong somewhere.

Can anyone who understands matrices help me out?

My function looks like this:

var generateRotationMatrix = function(x, y, z, tx, ty, tz) {
    var a = x;
    var b = y;
    var c = z;

    var rotationXMatrix = $M([
      [1,0,0,0],
      [0,Math.cos(a), Math.sin(-a), 0],
      [0,Math.sin(a), Math.cos( a), 0],
      [0,0,0,1]
    ]);

    var rotationYMatrix = $M([
      [Math.cos( b), 0, Math.sin(b),0],
      [0,1,0,0],
      [Math.sin(-b), 0, Math.cos(b), 0],
      [0,0,0,1]
    ]);

    var rotationZMatrix = $M([
      [Math.cos(c), Math.sin(-c), 0, 0],
      [Math.sin(c), Math.cos( c), 0, 0],
      [0,0,1,0],
      [0,0,0,1]
    ]);

    var translationMatrix = $M([
                [1,0,0,0],
                [0,1,0,0],
                [0,0,1,0],
                [tx,ty,tz,1]
                   ]);
    var tM = rotationXMatrix
             .x(rotationYMatrix)
             .x(rotationZMatrix)
         .x(translationMatrix);

    var s  = "matrix3d("
    s += tM.e(1,1).toFixed(10) + "," + tM.e(1,2).toFixed(10) + "," + tM.e(1,3).toFixed(10) + "," + tM.e(1,4).toFixed(10) + ","
    s += tM.e(2,1).toFixed(10) + "," + tM.e(2,2).toFixed(10) + "," + tM.e(2,3).toFixed(10) + "," + tM.e(2,4).toFixed(10) + ","
    s += tM.e(3,1).toFixed(10) + "," + tM.e(3,2).toFixed(10) + "," + tM.e(3,3).toFixed(10) + "," + tM.e(3,4).toFixed(10) + ","
    s += tM.e(4,1).toFixed(10) + "," + tM.e(4,2).toFixed(10) + "," + tM.e(4,3).toFixed(10) + "," + tM.e(4,4).toFixed(10)
    s += ")";
    return s;
}

Please note I'm using Sylvester to do my matrix maths (the multiplication)

Answer 1

Update (April 22, 2014) by thisiate - original author

This problem was in the back of my mind as I am doing something similar, so while looking at it more closely, I noticed the bug and found out why it occurred. Here is a brief explanation.

The translation matrix is wrong:

var translationMatrix = $M([
            [1,0,0,0],
            [0,1,0,0],
            [0,0,1,0],
            [tx,ty,tz,1]
               ]);

Needs to be rewritten as:

var translationMatrix = $M([
            [1,0,0,tx],
            [0,1,0,ty],
            [0,0,1,tz],
            [0,0,0,1]
               ]);

This small mistake explains why you are seeing a strange result. The 3 places where something would multiply to zero in the matrix multiplications are now multiplied by the transform variables thus computing a different angle. Also, any transform would not be applied as 0's are given as basically constants. Further, the position of tz originally affects the part of the matrix dealing with perspective.

I believe that this should fix any problems with matrix part. My original answer is based on the fact that rotate3d is limited to 360 degrees (0-359). One cannot pass through 360 nor -360 as a transform between is interpolated as a modulus 360 value due to the period of the sine and cosine waves. Transforms between say rotateX valueX1 rotateY valueY1 to rotateX valueX2 rotateY valueY2 will actually interpolate each directly and use that result inside the CSS engine (all these transforms will be hardware accelerated by the video processor if available instead of the CPU) and will be faster than computing the matrix transform.

Original Answer below:

Matt, if you want solely to apply multiple transforms and have an easy way to change each individual element of the transform (say rotateX), see this answer I gave for a different solution .

You do not need to use the matrix3d to get what you want. The browser will work out the resulting transform (using the graphics processor if available). It is important to realize that the order that the rotation transforms are written in affect the final output as the frame of reference changes.

For example, when you do a rotateY(180deg), the frame of reference now changes the X and Z axis to their opposites as you are now staring at the back of the element (negative X values are to the right of the Y-axis, positive to the left, likewise, the Z-axis negative values now are closer to you than 0 and the positive Z-axis values are into the screen).

To make it easy to work out what happens to an element with multiple rotations, take a piece of cardstock or similar paper, draw the X and Y axes, and put a toothpick through the origin with more of it sticking through the top side (positive z-axis) of the paper, note that in the browser Y is down, not up. Now start with the first rotation and do it in 3d with the paper. Repeat for all rotations, then do any translations, then scales (you'll have to imagine this one), etc.