What is the math behind -webkit-perspective?

Question

"Simple" question that I can't find the answer to -- What does -webkit-perspective actually do mathematically? (I know the effect it has, it basically acts like a focal-length control) e.g. what does -webkit-perspective: 500 mean?!?

I need to find the on-screen location of something that's been moved using, among other things, -webkit-perspective

Answer 1

The CSS 3D Transforms Module working draft gives the following explanation:

perspective(<number>)

specifies a perspective projection matrix. This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose peak represents the viewer's position. The viewable area is the region bounded by the four edges of the viewport (the portion of the browser window used for rendering the webpage between the viewer's position and a point at a distance of infinity from the viewer). The depth, given as the parameter to the function, represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. The value is given in pixels, so a value of 1000 gives a moderate amount of foreshortening and a value of 200 gives an extreme amount. The matrix is computed by starting with an identity matrix and replacing the value at row 3, column 4 with the value -1/depth. The value for depth must be greater than zero, otherwise the function is invalid.

This is something of a start, if not entirely clear. The first sentence leads me to believe the perspective projection matrix article on Wikipedia might be of some help, although in the comments on this post it is revealed there might be some slight differences between the CSS Working Group's conventions and those found in Wikipedia, so please check those out to save yourself a headache.

Answer 2

@Domenic Oddly enough, the description "The matrix is computed by starting with an identity matrix and replacing the value at row 3, column 4 with the value -1/depth." has already been removed from the The CSS 3D Transforms Module working draft now. Perhaps there might have been some inaccuracies with this description.

Well, as to the question what does the number in perspective(<number>) means, I think it could be seen as the distance between the position of the imagined camera and your computer screen.

Answer 3

Check out http://en.wikipedia.org/wiki/Perspective_projection#Diagram

After reading the previous comments and doing some research and testing I'm pretty sure this is correct.

Notice that this is same for the Y coord too.

Transformed X = Original X * ( Perspective / ( Perspective - Z translation ) )

eg. Div is 500px wide Perspective is 10000px Transform is -5000px in Z direction

Transformed Width = 500 * ( 10000 / ( 10000 - ( -5000 ) ) Transformed Width = 500 * ( 10000 / 15000) = 500 * (2/3) = 333px