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.

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

Ah - thinking a little more, 2d matrix transforms can only rotate, skew or transform. That means that lines that are parallel before transformation are parallel afterwards.

I'll leave this question here in case anyone else falls into the same line of thinking!

Answer 2

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.