Question

I have created the 3D effect I am after using RotateX in this fiddle:

http://jsfiddle.net/vEWEL/11/

However, I am unsure how to achieve the same effect on the red square in this Fiddle:

http://jsfiddle.net/paulsidebottom/jbfSj/

What Matrix3D transform do I need to apply to the marker to get it to stand up in the vertical plane?

Answer 1

By inspecting the first example, then looking at the computed tab in Webkit’s inspector, you can see the matrix the first one used was:

-webkit-transform: matrix3d(1, 0, 0, 0,
                            0, 0.5000000000000001, -0.8660254037844386, 0, 0,
                            0.8660254037844386, 0.5000000000000001, 0,
                            0, 0, 0, 1);

Applying this as is doesn’t seem to work in your second example, but this maybe because of other differences in your code.

The reason this is used is because a rotation matrix in the X axis looks like:

[1,0,0,0],
[0,cos(a), sin(-a), 0],
[0,sin(a), cos( a), 0],
[0,0,0,1]

In your case, a is 60 degrees, which in radians is π/3. cos(π/3) = 0.5, and sin(π/3) = sqrt(3)/2 = 0.866025.