1

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)?

Community
  • 1
user2664687
  • 13
  • Searching StackOverflow with terms "rotation translation matrix" will show you a number of related posts explaining the use of a matrix multiplication to represent both rotation and translation of points. – hardmath Jan 21 '14 at 13:42
  • Thank you. «posts explaining the use of a matrix multiplication to represent both rotation and translation of points.» - rotation, scaling and translation causes no problems. Problems appeared after perspective, because I get z and perspective coordinates, and don't know what to do with them. – user2664687 Jan 22 '14 at 07:41

0 Answers0