What is the math behind the webkit perspective?

Question

A “simple” question that I cannot find the answer to - what does -webkit-perspective actually do mathematically? (I know what effect it has, it basically acts like focal length control), for example. what does -webkit-perspective: 500 mean -webkit-perspective: 500 ????

I need to find the location on the screen of what was moved using, among other things, -webkit-perspective

Answer 1

The CSS 3D Transforms Module provides the following explanation:

perspective (<number>)

indicates a perspective forecast matrix. This matrix displays the cube of view on a pyramid whose base is infinitely distant from the viewer and whose peak represents the viewer's position. The visible area is the area bounded by the four edges of the viewport (the part of the browser window used to display the webpage between the position of the viewer and the point at infinity from the viewer). The depth specified as a parameter of the function is the distance from the plane z = 0 from the viewer. Lower values ​​give a more oblate pyramid and, therefore, a more pronounced perspective effect. The value is specified in pixels, so a value of 1000 gives a moderate amount of angle and a value of 200 gives an extreme value of quantity. The matrix is ​​calculated starting from the identity matrix and replacing the value in row 3, column 4 with a value of -1 / depth. the value for depth must be greater than zero, otherwise the function is not valid.

This is a bit of a start, if not entirely clear. The first sentence makes me believe in the article on the perspective projection matrix on Wikipedia, it may help, although the comments on this post show that there may be some slight differences between the CSS working group conventions and those found on Wikipedia, so please check them to save a headache.

Answer 2

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

After reading the previous comments and doing some research and testing, I am sure that this is correct.

Note that this is also for the Y coordinate.

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

eg. Div has a width of 500 pixels Perspective 10000px Transformation -5000px in the Z direction

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

Answer 3

@Domenic Oddly enough, the description "The matrix is ​​calculated starting from the identity matrix and replacing the value in row 3, column 4 with the value -1 / depth." has already been removed from the CSS 3D Transforms Module . There may have been some inaccuracies with this description.

Well, as for the question of what the number in perspective (<number>) means, I think that this can be seen as the distance between the position of the imaginary camera and the screen of your computer.