?

Author: bert-github

css3-transforms/ChangeLog

@@ -1,3 +1,6 @@
+2012-03-14 ayg@aryeh.name
+    Explain the definition of backface-visibility
+
 2012-03-13 dschulze@adobe.com
     Fixed typos in the SVG 'transform' attribute section.
 

css3-transforms/Overview.html

@@ -1908,6 +1908,28 @@ <h2 id=backface-visibility-property><span class=secno>12. </span> The
 
   <div class=issue> Is the relevant matrix here really relative to the
    viewport, or to the root of the 3D rendering context?</div>
+
+  <p class=note> The reasoning for this definition is as follows. Assume
+   elements are rectangles in the <var>x</var>&ndash;<var>y</var> plane with
+   infinitesimal thickness. The front of the untransformed element has
+   coordinates like (<var>x</var>, <var>y</var>, <var>&epsilon;</var>), and
+   the back is (<var>x</var>, <var>y</var>, &minus;<var>&epsilon;</var>), for
+   some very small <var>&epsilon;</var>. We want to know if after the
+   transformation, the front of the element is closer to the viewer than the
+   back (higher <var>z</var>-value) or further away. The
+   <var>z</var>-coordinate of the front will be
+   <var>M</var><sub>13</sub><var>x</var> +
+   <var>M</var><sub>23</sub><var>y</var> +
+   <var>M</var><sub>33</sub><var>&epsilon;</var> + <var>M</var><sub>43</sub>,
+   before accounting for perspective, and the back will be
+   <var>M</var><sub>13</sub><var>x</var> +
+   <var>M</var><sub>23</sub><var>y</var> &minus;
+   <var>M</var><sub>33</sub><var>&epsilon;</var> + <var>M</var><sub>43</sub>.
+   The first quantity is greater than the second if and only if
+   <var>M</var><sub>33</sub> > 0. (If it equals zero, the front and back are
+   equally close to the viewer. This probably means something like a
+   90-degree rotation, which makes the element invisible anyway, so we don't
+   really care whether it vanishes.)</p>
   <!-- ======================================================================================================= -->
 
   <h2 id=transform-functions><span class=secno>13. </span> The Transformation

css3-transforms/Transforms.src.html

@@ -1555,6 +1555,31 @@ <h2 id="backface-visibility-property">
                   Is the relevant matrix here really relative to the viewport, or to the root of the 3D rendering context?
                 </div>
               </p>
+              <p class="note">
+                The reasoning for this definition is as follows.  Assume
+                elements are rectangles in the <var>x</var>&ndash;<var>y</var>
+                plane with infinitesimal thickness.  The front of the
+                untransformed element has coordinates like (<var>x</var>,
+                <var>y</var>, <var>&epsilon;</var>), and the back is
+                (<var>x</var>, <var>y</var>, &minus;<var>&epsilon;</var>), for
+                some very small <var>&epsilon;</var>.  We want to know if after
+                the transformation, the front of the element is closer to the
+                viewer than the back (higher <var>z</var>-value) or further
+                away.  The <var>z</var>-coordinate of the front will be
+                <var>M</var><sub>13</sub><var>x</var> +
+                <var>M</var><sub>23</sub><var>y</var> +
+                <var>M</var><sub>33</sub><var>&epsilon;</var> +
+                <var>M</var><sub>43</sub>, before accounting for perspective,
+                and the back will be <var>M</var><sub>13</sub><var>x</var> +
+                <var>M</var><sub>23</sub><var>y</var> &minus;
+                <var>M</var><sub>33</sub><var>&epsilon;</var> +
+                <var>M</var><sub>43</sub>.  The first quantity is greater than
+                the second if and only if <var>M</var><sub>33</sub> > 0.  (If
+                it equals zero, the front and back are equally close to the
+                viewer.  This probably means something like a 90-degree
+                rotation, which makes the element invisible anyway, so we don't
+                really care whether it vanishes.)
+              </p>
 
               <!-- ======================================================================================================= -->