How do I compete the transformation matrix needed to transform a rectangle into a trapezium?

Question

I\'m playing around with css transforms and the equivalent filters in IE, and want to simulate perspective by transforming a 2d rectangle into a trapezium.

Specifica

Answer 1

For projection, I'd use a 4x4 matrix:

1    0    0    0
0    1    0    0
0    0    0    0
0    0    1/d  1

This works on homogeneous coordinates (d is the distance of the eye from the projection plane, in a standard perspective setup).

Alternative:

To avoid working with homogeneous coordinates (or if you can't use 4x4 matrixes, or if you can't use hardware acceleration for matrix transformation anyway), just use this:

x' = (d*x)/(z+d)
y' = (d*y)/(z+d)
z' = 0 (it's always projected onto the projection plane)

BTW, this also basically answers your trapezium question. Just put your rectangle correctly in the 3D space - it's not hard to figure out how: Just imagine a rectangular painting on a wall to your right hand side. Then lower your eye point to be level with the bottom of the painting. Now it will be projected as your trapezium.