All examples By author By category About

mayblue9

Perspective Transformation

A perspective projection can be precisely specified through four pairs of corresponding points. By dragging the four corners of the sailboat image above, you can adjust the perspective projection interactively and place the image anywhere you like in the scene.

The image is transformed using a matrix3d CSS transform. The transformation matrix is computed by solving a series of linear equations derived from the four point-pairs using LU decomposition as implemented by numeric.js.

This technique can also be used to apply a perspective transform manually for simple 2D shapes, such as lines and circles.