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

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.

Answer 2

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 3

You can accomplish this with the new CSS3 matrix3d transform which will give you the ability to use the abovementioned 4x4 matrix.

Answer 4

There are 2 answers for it in:

how to skew image like this

One for the stripe-based transformation which should be good enough for the original question (transform rectangle to a trapezoid):

https://stackoverflow.com/a/10427836/6336464

The other is a bit more complicated but allows custom pixel-based transformation based on a 4x2 matrix (transform rectangle to a convex quadrilateral where each corner of the quadrilateral can be custom-defined):

https://stackoverflow.com/a/37236664/6336464