2009-10-30 dino@apple.com

- perspective now takes a Length value
- described what the reverse face of a transformed element should look like

Author: grorg

css3-3d-transforms/ChangeLog

@@ -0,0 +1,4 @@
+2009-10-30  dino@apple.com
+
+- perspective now takes a Length value
+- described what the reverse face of a transformed element should look like

css3-3d-transforms/Overview.html

@@ -21,14 +21,15 @@
 
    <h1>CSS 3D Transforms Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 April 2009</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 31 October
+    2009</h2>
 
    <dl>
     <dt>This version:
 
     <dd> <a
-     href="http://www.w3.org/TR/2009/ED-css3-3d-transforms-20090414">http://dev.w3.org/csswg/css3-3d-transforms/</a>
-     <!--http://www.w3.org/TR/2009/WD-css3-3d-transforms-20090414-->
+     href="http://www.w3.org/TR/2009/ED-css3-3d-transforms-20091031">http://dev.w3.org/csswg/css3-3d-transforms/</a>
+     <!--http://www.w3.org/TR/2009/WD-css3-3d-transforms-20091031-->
 
     <dt>Latest version:
 
@@ -111,6 +112,9 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
    W3C Patent Policy</a>.</p>
   <!--end-status-->
 
+  <p> The <a href=ChangeLog>list of changes made to this specification</a>
+   are available.
+
   <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   <!--begin-toc-->
 
@@ -147,17 +151,20 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
    <li><a href="#animation"><span class=secno>9 </span> Transitions and
     animations between transform values </a>
 
-   <li><a href="#dom-interfaces"><span class=secno>10 </span> DOM Interfaces
+   <li><a href="#rendering-3d"><span class=secno>10 </span> Rendering in 3d
+    </a>
+
+   <li><a href="#dom-interfaces"><span class=secno>11 </span> DOM Interfaces
     </a>
     <ul class=toc>
-     <li><a href="#cssmatrix-interface"><span class=secno>10.1 </span> 10.1
+     <li><a href="#cssmatrix-interface"><span class=secno>11.1 </span> 10.1
       CSSMatrix </a>
 
-     <li><a href="#csstransformvalue-interface"><span class=secno>10.2
+     <li><a href="#csstransformvalue-interface"><span class=secno>11.2
       </span> 10.2 CSSTransformValue </a>
     </ul>
 
-   <li><a href="#references"><span class=secno>11 </span>References</a>
+   <li><a href="#references"><span class=secno>12 </span>References</a>
     <ul class=toc>
      <li class=no-num><a href="#normative-references">Normative
       references</a>
@@ -426,7 +433,7 @@ <h2 id=perspective-property><span class=secno>5 </span> The <span
   <p> The <span class=prop-name>&lsquo;<code class=property><a
    href="#perspective">perspective</a></code>&rsquo;</span> property applies
    the same transform as the <span
-   class=prop-value>perspective(&lt;number&gt;)</span> transform function,
+   class=prop-value>perspective(&lt;length&gt;)</span> transform function,
    except that it applies only to the positioned or transformed children of
    the element, not to the transform on the element itself.
 
@@ -450,7 +457,7 @@ <h2 id=perspective-property><span class=secno>5 </span> The <span
     <tr>
      <td> <em>Value:</em>
 
-     <td> none | &lt;number&gt;
+     <td> none | &lt;length&gt;
 
     <tr>
      <td> <em>Initial:</em>
@@ -759,7 +766,7 @@ <h2 id=transform-functions><span class=secno>8 </span> The Transformation
     the skew on the Y axis. If the second parameter is not given then a value
     of 0 is used for the Y angle (ie. no skew on the Y axis).
 
-   <dt> <span class=prop-value>perspective(&lt;number&gt;)</span>
+   <dt> <span class=prop-value>perspective(&lt;length&gt;)</span>
 
    <dd> specifies a perspective projection matrix. This matrix maps a
     <em>viewing cube</em> onto a pyramid whose base is infinitely far away
@@ -770,11 +777,11 @@ <h2 id=transform-functions><span class=secno>8 </span> The Transformation
     viewer). The <em>depth</em>, 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.
+    effect. For example, a value of 1000px gives a moderate amount of
+    foreshortening and a value of 200px 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.
   </dl>
   <!-- ======================================================================================================= -->
 
@@ -863,13 +870,29 @@ <h2 id=animation><span class=secno>9 </span> Transitions and animations
   </ul>
   <!-- ======================================================================================================= -->
 
-  <h2 id=dom-interfaces><span class=secno>10 </span> DOM Interfaces</h2>
+  <h2 id=rendering-3d><span class=secno>10 </span> Rendering in 3d</h2>
+
+  <p> Since CSS only describes a flat rendering model, without perspective,
+   and where everything faces the viewer front on, once three-dimensional
+   transforms are supported it is necessary to describe how an element should
+   be drawn in different orientations.
+
+  <p> While CSS specifies a rendering order for properties, such as
+   background, border and content, this rendering order does not imply any
+   three-dimensional structure. That is, if an element is rotated so that its
+   back face is facing the user, it will appear like a mirrored version of
+   the front face. In other words, the transforms are applied to the rendered
+   version of the elements, as if the element is rendered into an offscreen
+   buffer, and that buffer is transformed and composited onto the page.</p>
+  <!-- ======================================================================================================= -->
+
+  <h2 id=dom-interfaces><span class=secno>11 </span> DOM Interfaces</h2>
 
   <p> This section describes the interfaces and functionality added to the
    DOM to support runtime access to the functionality described above.</p>
   <!-- ============================================================ -->
 
-  <h3 id=cssmatrix-interface><span class=secno>10.1 </span> 10.1 CSSMatrix</h3>
+  <h3 id=cssmatrix-interface><span class=secno>11.1 </span> 10.1 CSSMatrix</h3>
 
   <dl>
    <dt> <b>Interface <i><a id=DOM-CSSMatrix
@@ -1241,7 +1264,7 @@ <h3 id=cssmatrix-interface><span class=secno>10.1 </span> 10.1 CSSMatrix</h3>
   </dl>
   <!-- ============================================================ -->
 
-  <h3 id=csstransformvalue-interface><span class=secno>10.2 </span> 10.2
+  <h3 id=csstransformvalue-interface><span class=secno>11.2 </span> 10.2
    CSSTransformValue</h3>
 
   <dl>
@@ -1366,7 +1389,7 @@ <h3 id=csstransformvalue-interface><span class=secno>10.2 </span> 10.2
    functions listed in the <code><a href="#effects">transform</a></code>
    property.
 
-  <h2 id=references><span class=secno>11 </span>References</h2>
+  <h2 id=references><span class=secno>12 </span>References</h2>
 
   <h3 class=no-num id=normative-references>Normative references</h3>
   <!--begin-normative-->
@@ -1428,7 +1451,7 @@ <h2 class=no-num id=property-index>Property index</h2>
     <tr valign=baseline>
      <td><a class=property href="#perspective">perspective</a>
 
-     <td>none | &lt;number&gt;
+     <td>none | &lt;length&gt;
 
      <td>none
 

css3-3d-transforms/Overview.src.html

@@ -55,6 +55,10 @@ <h2 class="no-num no-toc" id="abstract">Abstract</h2>
 <h2 class="no-num no-toc" id="status">Status of this document</h2>
 <!--status-->
 
+<p>
+  The <a href="ChangeLog">list of changes made to this specification</a> are
+  available.
+</p>
 
 <h2 class="no-num no-toc" id="contents">Table of contents</h2>
 <!--toc-->
@@ -369,7 +373,7 @@ <h2 id="perspective-property">
       <p>
         The <span class="prop-name">'perspective'</span> property applies the
         same transform as the <span
-        class="prop-value">perspective(&lt;number&gt;)</span> transform
+        class="prop-value">perspective(&lt;length&gt;)</span> transform
         function, except that it applies only to the positioned or transformed
         children of the element, not to the transform on the element itself.
       <p>
@@ -396,7 +400,7 @@ <h2 id="perspective-property">
               <em>Value:</em>
             </td>
             <td>
-              none | &lt;number&gt;
+              none | &lt;length&gt;
             </td>
           </tr>
           <tr>
@@ -758,7 +762,7 @@ <h2 id="transform-functions">
           value of 0 is used for the Y angle (ie. no skew on the Y axis).
         </dd>
         <dt>
-          <span class="prop-value">perspective(&lt;number&gt;)</span>
+          <span class="prop-value">perspective(&lt;length&gt;)</span>
         </dt>
         <dd>
           specifies a perspective projection matrix. This matrix maps a <em>viewing cube</em> onto a pyramid whose
@@ -767,8 +771,8 @@ <h2 id="transform-functions">
           window used for rendering the webpage between the viewer's position and a point at a distance of
           infinity from the viewer). The <em>depth</em>, 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
+          therefore a more pronounced perspective effect. For example, a value of 1000px
+          gives a moderate amount of foreshortening and a value of 200px 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.
         </dd>
@@ -877,6 +881,25 @@ <h2 id="animation">
         </li>
       </ul>
 
+      <!-- ======================================================================================================= -->
+      <h2 id="rendering-3d">
+        Rendering in 3d
+      </h2>
+      <p>
+        Since CSS only describes a flat rendering model, without perspective, and where everything
+        faces the viewer front on, once three-dimensional transforms are supported it is necessary
+        to describe how an element should be drawn in different orientations.
+      </p>
+      
+      <p>
+        While CSS specifies a rendering order for properties, such as background, border and content,
+        this rendering order does not imply any three-dimensional structure. That is, if an element
+        is rotated so that its back face is facing the user, it will appear like a mirrored version
+        of the front face. In other words, the transforms are applied to the rendered version
+        of the elements, as if the element is rendered into an offscreen buffer, and that buffer is
+        transformed and composited onto the page.
+      </p>
+
       <!-- ======================================================================================================= -->
       <h2 id="dom-interfaces">
         DOM Interfaces