W3C home > Mailing lists > Public > public-css-commits@w3.org > January 2012

csswg/css3-transforms ChangeLog,1.5,1.6 Overview.html,1.15,1.16 Transforms.src.html,1.18,1.19

From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
Date: Sun, 29 Jan 2012 21:43:09 +0000
To: public-css-commits@w3.org
Message-Id: <E1RrcWj-0007bl-BP@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv29227

Modified Files:
	ChangeLog Overview.html Transforms.src.html 
Log Message:
2012-01-29 simon.fraser@apple.com
    Add text describing what the reverse side of an element looks like.
    Add more explicit description of how to compute backface visibility.


Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-transforms/ChangeLog,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- ChangeLog	29 Jan 2012 21:28:07 -0000	1.5
+++ ChangeLog	29 Jan 2012 21:43:07 -0000	1.6
@@ -1,4 +1,8 @@
 2012-01-29 simon.fraser@apple.com
+    Add text describing what the reverse side of an element looks like.
+    Add more explicit description of how to compute backface visibility.
+
+2012-01-29 simon.fraser@apple.com
     The 3D rendering model section is mostly done. Moved some examples
     around. Cleaned up the perspective() definition.
     

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.15
retrieving revision 1.16
diff -u -d -r1.15 -r1.16
--- Overview.html	29 Jan 2012 21:28:07 -0000	1.15
+++ Overview.html	29 Jan 2012 21:43:07 -0000	1.16
@@ -820,47 +820,19 @@
    <div class=figure> <img alt="Intersecting sibling elements." height=200
     src="examples/3d-intersection.png" width=200></div>
   </div>
-  <!--
-                <p>
-  	              The <code class="property">'transform-style'</code> property defines
-                  how nested elements are rendered in three-dimensional space. If the <span
-                  class="prop-name">'transform-style'</code> is <span
-                  class="prop-value">'flat'</span>, all children of this element are
-                  rendered flattened into the 2D plane of the element. Therefore, rotating
-                  the element about the X or Y axes will cause children positioned at
-                  positive or negative Z positions to appear on the element's plane, rather
-                  than in front of or behind it. If the <span
-                  class="prop-name">'transform-style'</code> is <span
-                  class="prop-value">'preserve-3d'</span>, this flattening is not performed,
-                  so children maintain their position in three-dimensional space.
-                </p>
-                <p>
-                  This flattening takes place at each element, so preserving a hierarchy
-                  of elements in three-dimensional space requires that each element in the hierarchy
-                  have the value <code class="css">'preserve-3d'</span> for <span
-                  class="prop-name">'transform-style'</code>. But since <span
-                  class="prop-name">'transform-style'</code> affects only an element's
-                  children, the leaf nodes in a hierarchy do not require the 
-                  <code class="property">'transform-style: preserve-3d'</code> to be specified.
-                </p>
-                
-                <p>
-                  For some effects, the author will have to ensure that an ancestor
-                  element to a subtree using <code class="css">'preserve-3d'</span>
-                  has a <code class="property">'transform-style'</code> of <span
-                  class="prop-value">'flat'</span> (or the default). Otherwise, the
-                  elements in the 3D tree may be located behind ancestor elements and,
-                  thus, invisible (hidden behind an ancestor's background).
-                </p>
 
-                <p>
-                  Note that while 'preserve-3d' can be specified on an element, the effect may not
-                  be possible. Elements that have <code class="property">'overflow'</code> set to
-                  <code class="css">'hidden'</code> are unable to keep their children in 3D.
-                  In this case the element will behave as if the property was set to 
-                  <code class="css">'flat'</span>.
-                </p>
-                -->
+  <p> Using three-dimensional transforms, it's possible to transform an
+   element such that its reverse side is towards the viewer. 3D-tranformed
+   elements show the same content on both sides, so the reverse side looks
+   like a mirror-image of the front side (as if the element were painted onto
+   a sheet of glass). Normally, elements whose reverse side is towards the
+   viewer remain visible. However, the <a href="#backface-visibility"><code
+   class=property>'backface-visibility'</code></a> allows the author to make
+   an element invisible when its reverse side is towards the viewer. This
+   behavior is "live"; if an element with <code
+   class=css>backface-visibility: hidden</code> were animating, such that its
+   front and reverse sides were alternately visible, then it would only be
+   visible when the front side were towards the viewer.</p>
   <!-- ======================================================================================================= -->
 
   <h2 id=transform-property><span class=secno>6. </span> The <a
@@ -1373,6 +1345,23 @@
 
      <td> Same as specified value.
   </table>
+
+  <p> The visibility of an element with <code class=css>backface-visibility:
+   hidden</code> is determined as follows:
+
+  <ol>
+   <li>Compute a matrix representing the accumulated transform from the
+    viewport, taking the translations due to the CSS visual formattingn mode,
+    the perpsective and transformation matrices into account, in a similar
+    manner to the computation of the accumulated transform for an element in
+    a 3D rendering context.
+
+   <li> If the component of the matrix in row 3, column 3 is negative, then
+    the element should be hidden, otherwise it is visible.
+  </ol>
+
+  <div class=issue> Is the relevant matrix here really relative to the
+   viewport, or to the root of the 3D rendering context?</div>
   <!-- ======================================================================================================= -->
 
   <h2 id=transform-functions><span class=secno>12. </span> The Transformation

Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.18
retrieving revision 1.19
diff -u -d -r1.18 -r1.19
--- Transforms.src.html	29 Jan 2012 21:28:07 -0000	1.18
+++ Transforms.src.html	29 Jan 2012 21:43:07 -0000	1.19
@@ -577,51 +577,19 @@
                   <img src="examples/3d-intersection.png" width="200" height="200" alt="Intersecting sibling elements.">
                 </div>
               </div>
-
-
-
-<!--
-                <p>
-  	              The <code class="property">'transform-style'</code> property defines
-                  how nested elements are rendered in three-dimensional space. If the <span
-                  class="prop-name">'transform-style'</code> is <span
-                  class="prop-value">'flat'</span>, all children of this element are
-                  rendered flattened into the 2D plane of the element. Therefore, rotating
-                  the element about the X or Y axes will cause children positioned at
-                  positive or negative Z positions to appear on the element's plane, rather
-                  than in front of or behind it. If the <span
-                  class="prop-name">'transform-style'</code> is <span
-                  class="prop-value">'preserve-3d'</span>, this flattening is not performed,
-                  so children maintain their position in three-dimensional space.
-                </p>
-                <p>
-                  This flattening takes place at each element, so preserving a hierarchy
-                  of elements in three-dimensional space requires that each element in the hierarchy
-                  have the value <code class="css">'preserve-3d'</span> for <span
-                  class="prop-name">'transform-style'</code>. But since <span
-                  class="prop-name">'transform-style'</code> affects only an element's
-                  children, the leaf nodes in a hierarchy do not require the 
-                  <code class="property">'transform-style: preserve-3d'</code> to be specified.
-                </p>
-                
-                <p>
-                  For some effects, the author will have to ensure that an ancestor
-                  element to a subtree using <code class="css">'preserve-3d'</span>
-                  has a <code class="property">'transform-style'</code> of <span
-                  class="prop-value">'flat'</span> (or the default). Otherwise, the
-                  elements in the 3D tree may be located behind ancestor elements and,
-                  thus, invisible (hidden behind an ancestor's background).
-                </p>
-
-                <p>
-                  Note that while 'preserve-3d' can be specified on an element, the effect may not
-                  be possible. Elements that have <code class="property">'overflow'</code> set to
-                  <code class="css">'hidden'</code> are unable to keep their children in 3D.
-                  In this case the element will behave as if the property was set to 
-                  <code class="css">'flat'</span>.
-                </p>
-                -->
               
+              <p>
+                Using three-dimensional transforms, it's possible to transform an element such that its reverse side
+                is towards the viewer. 3D-tranformed elements show the same content on both sides, so the reverse side
+                looks like a mirror-image of the front side (as if the element were painted onto a sheet of glass).
+                Normally, elements whose reverse side is towards the viewer remain visible. However, the
+                <code class="property">'backface-visibility'</code> allows the author to make an element invisible
+                when its reverse side is towards the viewer. This behavior is "live"; if an element with
+                <code class="css">backface-visibility: hidden</code> were animating,
+                such that its front and reverse sides were alternately visible, then it would only be visible when the
+                front side were towards the viewer.
+              </p>
+
               <!-- ======================================================================================================= -->
 
               <h2 id="transform-property">
@@ -1236,7 +1204,24 @@
                   </tr>
                 </tbody>
               </table>
-              
+              <p>
+                The visibility of an element with <code class="css">backface-visibility: hidden</code> is determined
+                as follows:
+                <ol>
+                  <li>Compute a matrix representing the accumulated transform from the viewport, taking the translations
+                    due to the CSS visual formattingn mode, the perpsective and transformation matrices into account,
+                    in a similar manner to the computation of the accumulated transform for an element in a
+                    3D rendering context.
+                  </li>
+                  <li>
+                    If the component of the matrix in row 3, column 3 is negative, then the element should be hidden,
+                    otherwise it is visible.
+                  </li>
+                </ol>
+                <div class="issue">
+                  Is the relevant matrix here really relative to the viewport, or to the root of the 3D rendering context?
+                </div>
+              </p>
 
               <!-- ======================================================================================================= -->
 
Received on Sunday, 29 January 2012 21:43:14 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:09 UTC