More details for definition of perspective

Original patch by Tav.  Fixes
https://www.w3.org/Bugs/Public/show_bug.cgi?id=16327.

Author: ayg

css3-transforms/ChangeLog

@@ -1,3 +1,8 @@
+2012-03-19 ayg@aryeh.name
+    More details for definition of perspective
+    Original patch by Tav.
+    Fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=16327.
+
 2012-03-19 ayg@aryeh.name
     Better definition for backface-visibility
     Fixes https://www.w3.org/Bugs/Public/show_bug.cgi?id=16349.

css3-transforms/Overview.html

@@ -699,7 +699,37 @@ <h3 id=transform-3d-rendering><span class=secno>5.1. </span>3D Transform
    class=property>perspective-origin</code></code></a>&rsquo; 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.
+   appear smaller. The scaling is proportional to <var>d</var>/(<var>d</var>
+   &minus; <var>Z</var>) where <var>d</var>, the value of &lsquo;<a
+   href="#perspective"><code class=css><code
+   class=property>perspective</code></code></a>&rsquo;, is the distance from
+   the drawing plane to the the assumed position of the viewer's eye.
+
+  <div class=figure> <img alt="Diagram of scale vs. Z position"
+   src="perspective_distance.png">
+   <p class=caption> Diagrams showing how scaling depends on the &lsquo;<a
+    href="#perspective"><code class=css><code
+    class=property>perspective</code></code></a>&rsquo; property and Z
+    position. In the top diagram, <var>Z</var> is half of <var>d</var>. In
+    order to make it appear that the original circle (solid outline) appears
+    at <var>Z</var> (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.</p>
+  </div>
+
+  <p> Normally the assumed position of the viewer's eye is centered on a
+   drawing. This position can be moved if desired &ndash; for example, if a
+   web page contains multiple drawings that should share a common perspective
+   &ndash; by setting &lsquo;<a href="#perspective-origin"><code
+   class=css><code
+   class=property>perspective-origin</code></code></a>&rsquo;.
+
+  <div class=figure> <img alt="Diagram of different perspective-origin"
+   src="perspective_origin.png">
+   <p class=caption> Diagram showing the effect of moving the perspective
+    origin upward.</p>
+  </div>
 
   <p id=perspective-matrix-computation> The <a
    href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> is computed as

css3-transforms/Transforms.src.html

@@ -422,10 +422,51 @@ <h3 id="transform-3d-rendering">3D Transform Rendering</h3>
               </div>
 
               <p>
-                The '<code class="property">perspective</code>' and '<code class="property">perspective-origin</code>'
-                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.
+                The '<code class="property">perspective</code>' and
+                '<code class="property">perspective-origin</code>'
+                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. The scaling is proportional to
+                <var>d</var>/(<var>d</var> &minus; <var>Z</var>)
+                where <var>d</var>, the value of
+                '<code class="property">perspective</code>', is the
+                distance from the drawing plane to the the assumed
+                position of the viewer's eye.
               </p>
+
+              <div class="figure">
+                <img alt="Diagram of scale vs. Z position" src="perspective_distance.png">
+                <p class="caption">
+                  Diagrams showing how scaling depends on the
+                  '<code class="property">perspective</code>' property
+                  and Z position. In the top diagram, <var>Z</var> is half of <var>d</var>. In
+                  order to make it appear that the original circle
+                  (solid outline) appears at <var>Z</var> (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.
+                </p>
+              </div>
+
+              <p>
+                Normally the assumed position of the viewer's eye is
+                centered on a drawing. This position can be moved if
+                desired &ndash; for example, if a web page contains
+                multiple drawings that should share a common perspective
+                &ndash; by setting
+                '<code class="property">perspective-origin</code>'.
+              </p>
+
+              <div class="figure">
+                <img alt="Diagram of different perspective-origin" src="perspective_origin.png">
+                <p class="caption">
+                  Diagram showing the effect of moving the perspective origin upward.
+                </p>
+              </div>
+
               <p id="perspective-matrix-computation">
                 The <a href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> is computed as follows:
                 <!-- Make this more mathy, with matrices? -->