I believe what you are asking for is referred to asProjective TransformationorHomography- and is a very well studied concept in computer graphics. Simply googling those two terms should get you well on your way to implementing a perspective transform algorithm in your favorite language.

The easiest and currently most popular method in CG for solving this is using a system of linear equations to solve for the desired projected coordinates (geometric corrected). To really understand this stuff, you basically need a couple semesters of calculus and at least one course in linear algebra and/or Diff EQ.

But here are some good sources to get started:

The Wikipedia article on Homography:

https://en.wikipedia.org/wiki/Homogr...cal_definition

A really great explanation on math.stackexchange (But again, unless you have a foundation of calculus and linear algebra, this stuff may be a bit confusing).

http://math.stackexchange.com/questi.../339033#339033

And lastly, because I love simple javascript examples, here is a direct link to the simple javascript example of projective transformation discussed in the example above... all the source code is right there if you are interested in diving in to seeing how things work. It is all pretty basic matrix transforms / mathematics / solving for linear equations.

This javascript example is using matrix3d CSS object to do the drawing, but all of the matrix math is included in this example.

http://jsfiddle.net/dFrHS/1/