lets say we have a div with 500x500px size and we rotate it on the x axis via css 45 degrees considering a webkit-perspective value of 1600px.
How would you calculate the absolute dimensions of the displayed trapezium? (width, max-height, angles)
I did only figure out a formula that calculates the width but without considering the perspective, so the value differ some pixels (JavaScript):
var absoluteWidth = Math.cos(45 * (Math.PI / 180)) * 500);
EDIT: Here is the spec about the -webkit-perspective function:
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.
Regarding the "perspective projection matrix" this is what I found on Wikipedia: http://en.wikipedia.org/wiki/3D_projection#Perspective_projection