I am trying to understand 3d-transformation in html5 and when it's rotation, scaling and moving - it is simple. But adding perspective confuses me. For example we have a rectangle: [400, 200], origin is in the center [200, 100], transform matrix is:
1 0 0 0
0 0.7 -0.707 -141.421
0 0.7 0.7071 -141.421
0 -0.001 -0.001 1.177777
And we have a point in the bottom-left corner [0, 200], considering origin: (0 - 200, 200 - 100) = (-200, 100).
Make transformation:
1 0 0 0 -200 -200
0 0.7 -0.707 -141.421 100 70
0 0.7 0.7071 -141.421 x 0 = 70
0 -0.001 -0.001 1.177777 0 -0.1
If I throw 3d & 4th parameter I get (-200, 70), considering origin it's [0, 170]. I simulate this in jsfiddle, and the point should be somewhere about [20, 32], considering origin it's (-180, -68).
So what is the math of 3d-transformation here? How webkit or other html-render gets the point (-180, -68) instead of the vector (-200, 70, 70, -0.1)?