8000 2012-01-29 simon.fraser@apple.com · w3c/csswg-drafts@e12e957 · GitHub
Skip to content

Commit e12e957

Browse files
smfrsmfr
committed
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.
1 parent ad176c2 commit e12e957

3 files changed

Lines changed: 64 additions & 86 deletions

File tree

‎css3-transforms/ChangeLog‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
2012-01-29 simon.fraser@apple.com
2+
Add text describing what the reverse side of an element looks like.
3+
Add more explicit description of how to compute backface visibility.
4+
15
2012-01-29 simon.fraser@apple.com
26
The 3D rendering model section is mostly done. Moved some examples
37
around. Cleaned up the perspective() definition.

‎css3-transforms/Overview.html‎

Lines changed: 30 additions & 41 deletions
< 729A td data-grid-cell-id="diff-cde03e0050419941459e4f1f387b880f95a966bf7cea1d35b74f29cb4dcea5e5-863-828-2" data-line-anchor="diff-cde03e0050419941459e4f1f387b880f95a966bf7cea1d35b74f29cb4dcea5e5R828" data-selected="false" role="gridcell" style="background-color:var(--diffBlob-additionLine-bgColor, var(--diffBlob-addition-bgColor-line));padding-right:24px" tabindex="-1" valign="top" class="focusable-grid-cell diff-text-cell right-side-diff-cell left-side">+
a sheet of glass). Normally, elements whose reverse side is towards the
Original file line numberDiff line numberDiff line change
@@ -820,47 +820,19 @@ <h3 id=transform-3d-rendering><span class=secno>5.1. </span>3D Transform
820820
<div class=figure> <img alt="Intersecting sibling elements." height=200
821821
src="examples/3d-intersection.png" width=200></div>
822822
</div>
823-
<!--
824-
<p>
825-
The <code class="property">'transform-style'</code> property defines
826-
how nested elements are rendered in three-dimensional space. If the <span
827-
class="prop-name">'transform-style'</code> is <span
828-
class="prop-value">'flat'</span>, all children of this element are
829-
rendered flattened into the 2D plane of the element. Therefore, rotating
830-
the element about the X or Y axes will cause children positioned at
831-
positive or negative Z positions to appear on the element's plane, rather
832-
than in front of or behind it. If the <span
833-
class="prop-name">'transform-style'</code> is <span
834-
class="prop-value">'preserve-3d'</span>, this flattening is not performed,
835-
so children maintain their position in three-dimensional space.
836-
</p>
837-
<p>
838-
This flattening takes place at each element, so preserving a hierarchy
839-
of elements in three-dimensional space requires that each element in the hierarchy
840-
have the value <code class="css">'preserve-3d'</span> for <span
841-
class="prop-name">'transform-style'</code>. But since <span
842-
class="prop-name">'transform-style'</code> affects only an element's
843-
children, the leaf nodes in a hierarchy do not require the
844-
<code class="property">'transform-style: preserve-3d'</code> to be specified.
845-
</p>
846-
847-
<p>
848-
For some effects, the author will have to ensure that an ancestor
849-
element to a subtree using <code class="css">'preserve-3d'</span>
850-
has a <code class="property">'transform-style'</code> of <span
851-
class="prop-value">'flat'</span> (or the default). Otherwise, the
852-
elements in the 3D tree may be located behind ancestor elements and,
853-
thus, invisible (hidden behind an ancestor's background).
854-
</p>
855-
856-
<p>
857-
Note that while 'preserve-3d' can be specified on an element, the effect may not
858-
be possible. Elements that have <code class="property">'overflow'</code> set to
859-
<code class="css">'hidden'</code> are unable to keep their children in 3D.
860-
In this case the element will behave as if the property was set to
861-
<code class="css">'flat'</span>.
862-
</p>
863-
-->
823+
824+
<p> Using three-dimensional transforms, it's possible to transform an
825+
element such that its reverse side is towards the viewer. 3D-tranformed
826+
elements show the same content on both sides, so the reverse side looks
827+
like a mirror-image of the front side (as if the element were painted onto
828
829+
viewer remain visible. However, the <a href="#backface-visibility"><code
830+
class=property>'backface-visibility'</code></a> allows the author to make
831+
an element invisible when its reverse side is towards the viewer. This
832+
behavior is "live"; if an element with <code
833+
class=css>backface-visibility: hidden</code> were animating, such that its
834+
front and reverse sides were alternately visible, then it would only be
835+
visible when the front side were towards the viewer.</p>
864836
<!-- ======================================================================================================= -->
865837

866838
<h2 id=transform-property><span class=secno>6. </span> The <a
@@ -1373,6 +1345,23 @@ <h2 id=backface-visibility-property><span class=secno>11. </span> The <a
13731345

13741346
<td> Same as specified value.
13751347
</table>
1348+
1349+
<p> The visibility of an element with <code class=css>backface-visibility:
1350+
hidden</code> is determined as follows:
1351+
1352+
<ol>
1353+
<li>Compute a matrix representing the accumulated transform from the
1354+
viewport, taking the translations due to the CSS visual formattingn mode,
1355+
the perpsective and transformation matrices into account, in a similar
1356+
manner to the computation of the accumulated transform for an element in
1357+
a 3D rendering context.
1358+
1359+
<li> If the component of the matrix in row 3, column 3 is negative, then
1360+
the element should be hidden, otherwise it is visible.
1361+
</ol>
1362+
1363+
<div class=issue> Is the relevant matrix here really relative to the
1364+
viewport, or to the root of the 3D rendering context?</div>
13761365
<!-- ======================================================================================================= -->
13771366

13781367
<h2 id=transform-functions><span class=secno>12. </span> The Transformation

‎css3-transforms/Transforms.src.html‎

Lines changed: 30 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -577,51 +577,19 @@ <h3 id="transform-3d-rendering">3D Transform Rendering</h3>
577577
<img src="examples/3d-intersection.png" width="200" height="200" alt="Intersecting sibling elements.">
578578
</div>
579579
</div>
580-
581-
582-
583-
<!--
584-
<p>
585-
The <code class="property">'transform-style'</code> property defines
586-
how nested elements are rendered in three-dimensional space. If the <span
587-
class="prop-name">'transform-style'</code> is <span
588-
class="prop-value">'flat'</span>, all children of this element are
589-
rendered flattened into the 2D plane of the element. Therefore, rotating
590-
the element about the X or Y axes will cause children positioned at
591-
positive or negative Z positions to appear on the element's plane, rather
592-
than in front of or behind it. If the <span
593-
class="prop-name">'transform-style'</code> is <span
594-
class="prop-value">'preserve-3d'</span>, this flattening is not performed,
595-
so children maintain their position in three-dimensional space.
596-
</p>
597-
<p>
598-
This flattening takes place at each element, so preserving a hierarchy
599-
of elements in three-dimensional space requires that each element in the hierarchy
600-
have the value <code class="css">'preserve-3d'</span> for <span
601-
class="prop-name">'transform-style'</code>. But since <span
602-
class="prop-name">'transform-style'</code> affects only an element's
603-
children, the leaf nodes in a hierarchy do not require the
604-
<code class="property">'transform-style: preserve-3d'</code> to be specified.
605-
</p>
606-
607-
<p>
608-
For some effects, the author will have to ensure that an ancestor
609-
element to a subtree using <code class="css">'preserve-3d'</span>
610-
has a <code class="property">'transform-style'</code> of <span
611-
class="prop-value">'flat'</span> (or the default). Otherwise, the
612-
elements in the 3D tree may be located behind ancestor elements and,
613-
thus, invisible (hidden behind an ancestor's background).
614-
</p>
615-
616-
<p>
617-
Note that while 'preserve-3d' can be specified on an element, the effect may not
618-
be possible. Elements that have <code class="property">'overflow'</code> set to
619-
<code class="css">'hidden'</code> are unable to keep their children in 3D.
620-
In this case the element will behave as if the property was set to
621-
<code class="css">'flat'</span>.
622-
</p>
623-
-->
624580

581+
<p>
582+
Using three-dimensional transforms, it's possible to transform an element such that its reverse side
583+
is towards the viewer. 3D-tranformed elements show the same content on both sides, so the reverse side
584+
looks like a mirror-image of the front side (as if the element were painted onto a sheet of glass).
585+
Normally, elements whose reverse side is towards the viewer remain visible. However, the
586+
<code class="property">'backface-visibility'</code> allows the author to make an element invisible
587+
when its reverse side is towards the viewer. This behavior is "live"; if an element with
588+
<code class="css">backface-visibility: hidden</code> were animating,
589+
such that its front and reverse sides were alternately visible, then it would only be visible when the
590+
front side were towards the viewer.
591+
</p>
592+
625593
<!-- ======================================================================================================= -->
626594

627595
<h2 id="transform-property">
@@ -1236,7 +1204,24 @@ <h2 id="backface-visibility-property">
12361204
</tr>
12371205
</tbody>
12381206
</table>
1239-
1207+
<p>
1208+
The visibility of an element with <code class="css">backface-visibility: hidden</code> is determined
1209+
as follows:
1210+
<ol>
1211+
<li>Compute a matrix representing the accumulated transform from the viewport, taking the translations
1212+
due to the CSS visual formattingn mode, the perpsective and transformation matrices into account,
1213+
in a similar manner to the computation of the accumulated transform for an element in a
1214+
3D rendering context.
1215+
</li>
1216+
<li>
1217+
If the component of the matrix in row 3, column 3 is negative, then the element should be hidden,
1218+
otherwise it is visible.
1219+
</li>
1220+
</ol>
1221+
<div class="issue">
1222+
Is the relevant matrix here really relative to the viewport, or to the root of the 3D rendering context?
1223+
</div>
1224+
</p>
12401225

12411226
<!-- ======================================================================================================= -->
12421227

0 commit comments

Comments
 (0)