- From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
- Date: Sun, 29 Jan 2012 21:43:09 +0000
- To: public-css-commits@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