diff -r f76d49b98a1c css3-transforms/Transforms.src.html --- a/css3-transforms/Transforms.src.html Tue Mar 13 11:19:47 2012 -0700 +++ b/css3-transforms/Transforms.src.html Tue Mar 13 14:27:26 2012 -0700 @@ -380,10 +380,37 @@

- The 'perspective' and 'perspective-origin' + The 'perspective' and 'perspective-origin' properties can be used to add a feeling of depth to a scene by making elements higher on the Z axis - (closer to the viewer) appear larger, and those further away to appear smaller. + (closer to the viewer) appear larger, and those further away to appear smaller. The scaling is proportional + to d/(d-Z) where d, the ‘perspective()’, is the distance from the drawing plane to the the assumed + position of the viewer's eye.

+ +
Diagram of scale vs. Z position +

Diagrams showing how scaling depends on the + ‘perspective’ property and Z position. In the top diagram, Z is + half of d. In order to make it appear that the original + circle (solid outline) appears at Z (dashed circle) the + circle is scaled up by a factor of two resulting in the light + blue circle. In the bottom diagram the circle is scaled down + by a factor of one-third to make it appear behind the original + position. +

+
+ +

Normally the assumed position of the viewer's eye is centered on + a drawing. This position can be moved if desired (for example + if a web page contains multiple drawings that should share a common + perspective) by setting ‘perspective-origin’. +

+ +
Diagram of different perspective-origin +

+ Diagram showing the effect of moving the perspective origin upward. +

+
+

The perspective matrix is computed as follows: @@ -395,6 +422,20 @@

+

+ The resulting matrix is: +

+ +
+ \begin{bmatrix}  1 & 0 & -x_p/d & 0 \\  0 & 1 & -y_p/d & 0 \\  0 & 0 & 1 & 0 \\  0 & 0 & -1/d & 1 \end{bmatrix} +
+ +

where xp and yp are the computed values of ‘perspective-origin’ + and d is the length provided by the value of the ‘perspective’ property. +

+ +
Isn't this missing the scaling factor d/(d-Z).
+

This example shows how perspective can be used to cause three-dimensional transforms to appear more realistic.