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.

Specifically, I want the right hand side of the rectangle to stay the same height, and the left hand side to be say 80% of the height, so that the mid points of both sides are horizontally in line with each other.

I’m familiar with matrix algebra, but can’t think how to determine what matrix will do that.

Answer 1

For projection, I’d use a 4×4 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 4×4 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.