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

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

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

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

Answer 4

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.