- From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
- Date: Sun, 29 Jan 2012 21:28:09 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv27952
Modified Files:
ChangeLog Overview.html Transforms.src.html
Log Message:
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: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-transforms/ChangeLog,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -d -r1.4 -r1.5
--- ChangeLog 29 Jan 2012 16:52:54 -0000 1.4
+++ ChangeLog 29 Jan 2012 21:28:07 -0000 1.5
@@ -1,4 +1,8 @@
2012-01-29 simon.fraser@apple.com
+ The 3D rendering model section is mostly done. Moved some examples
+ around. Cleaned up the perspective() definition.
+
+2012-01-29 simon.fraser@apple.com
Use classnames from default.css rather than home-grown styles.
Use dfn.
More work on the 3D rendering context section.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.14
retrieving revision 1.15
diff -u -d -r1.14 -r1.15
--- Overview.html 29 Jan 2012 16:52:54 -0000 1.14
+++ Overview.html 29 Jan 2012 21:28:07 -0000 1.15
@@ -395,8 +395,8 @@
href="#perspective-origin"><code
class=property>perspective-origin</code></a> properties.</p>
- <dt id=TermPerspectiveMatrix><dfn id=transformation-matrix>transformation
- matrix</dfn>
+ <dt id=TermTransformationMatrix><dfn
+ id=transformation-matrix>transformation matrix</dfn>
<dd>
<p> A matrix computed from the values of the <a href="#effects"><code
@@ -425,7 +425,10 @@
<p> Specifying a value other than ‘<code
class=property>none</code>’ for the <a href="#effects"><code
class=property>'transform'</code></a> property establishes a new <em>local
- coordinate system</em> at the element that it is applied to.
+ coordinate system</em> at the element that it is applied to. The mapping
+ from where the element would have rendered into that local coordinate
+ system is given by the element's <a
+ href="#TermTransformationMatrix"><i>transformation matrix</i></a>.
Transformations are cumulative. That is, elements establish their local
coordinate system within the coordinate system of their parent. From the
perspective of the user, an element effectively accumulates all the <a
@@ -443,6 +446,25 @@
adding a Z axis perpendicular to the plane of the screen, that increases
towards the viewer.
+ <p> The <a href="#TermTransformationMatrix"><i>transformation
+ matrix</i></a> is computed from the <a href="#effects"><code
+ class=property>transform</code></a> and <a href="#transform-origin"><code
+ class=property>transform-origin</code></a> properties as follows:
+
+ <ol>
+ <li>Start with the identity matrix.
+
+ <li>Translate by the computed X, Y and Z values of <a
+ href="#transform-origin"><code class=property>transform-origin</code></a>
+
+ <li>Multiply by each of the transform functions in <a
+ href="#effects"><code class=property>transform</code></a> property in
+ turn
+
+ <li>Translate by the negated computed X, Y and Z values of <a
+ href="#transform-origin"><code class=property>transform-origin</code></a>
+ </ol>
+
<p> Transforms apply to <a href="#TermTransformableElement">transformable
elements</a>.
@@ -529,22 +551,12 @@
element is a member of a <a class=term href="#d-rendering-context">3D
rendering context</a>, as described below.
- <div class="issue issue-marker">
+ <div class=issue>
<p class=desc>This description does not exactly match what WebKit
implements. Perhaps it should be changed to match current
implementations?</p>
</div>
- <p> An element with a three-dimensional transform that is not contained in
- a <a class=term href="#d-rendering-context">3D rendering context</a>
- renders with the appropriate transform applied, but does not intersect
- with any other elements. The three-dimensional transform in this case can
- be considered just as a painting effect, like two-dimensional transforms.
- Similarly, the transform does not affect painting order. For example, a
- transform with a positive Z translation may make an element look larger,
- but does not cause that element to render in front of elements with no
- translation in Z.
-
<div class=example>
<p>This example shows the effect of three-dimensional transform applied to
an element.</p>
@@ -555,9 +567,7 @@
.container { border: 1px solid black; }
.transformed { transform: rotateY(50deg); }
</style>
-</pre>
- <pre>
<div class="container">
<div class="transformed"></div>
</div>
@@ -570,6 +580,33 @@
how this makes the blue box appear narrower, but not three-dimensional.</p>
</div>
+ <p> The <a href="#perspective"><code class=property>perspective</code></a>
+ and <a href="#perspective-origin"><code
+ class=property>perspective-origin</code></a> properties can be used to add
+ a feeling of depth to a scene by making elements higher on the Z axis
+ (closer to the viewer) appear larger, and those futher away to appear
+ smaller.
+
+ <p> The <a href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> is
+ computed as follows: <!-- Make this more mathy, with matrices? -->
+
+ <ol>
+ <li>Start with the identity matrix.
+
+ <li>Translate by the computed X and Y values of <a
+ href="#perspective-origin"><code
+ class=property>perspective-origin</code></a>
+
+ <li>Multiply by the matrix that would be obtained from the <code
+ class=css>perspective(<length>)</code> transform function, where
+ the length is provided by the value of the <a href="#perspective"><code
+ class=property>perspective</code></a> property
+
+ <li>Translate by the negated computed X and Y values of <a
+ href="#perspective-origin"><code
+ class=property>perspective-origin</code></a>
+ </ol>
+
<div class=example>
<p>This example shows how perspective can be used to cause
three-dimensional transforms to appear more realistic.</p>
@@ -580,26 +617,34 @@
.container { perspective: 500px; border: 1px solid black; }
.transformed { transform: rotateY(50deg); }
</style>
-</pre>
- <pre>
<div class="container">
<div class="transformed"></div>
</div>
</pre>
<div class=figure> <img
- alt="Div with a rotateY transform, and perspective on its container"
+ alt="Div with a rotateY transform, and perspective on its container"
height=190 src="examples/simple-perspective-example.png" width=210></div>
- <p>The inner element has the same transform as in Example 1, but its
- rendering is now influenced by the perspective property on its parent
- element. Perspective causes vertices that have positive Z coordinates
- (closer to the viewer) to be scaled up in X and Y, and those futher away
- (negative Z coordinates) to be scaled down, giving an appearance of
- depth.</p>
+ <p>The inner element has the same transform as in the previous example,
+ but its rendering is now influenced by the perspective property on its
+ parent element. Perspective causes vertices that have positive Z
+ coordinates (closer to the viewer) to be scaled up in X and Y, and those
+ futher away (negative Z coordinates) to be scaled down, giving an
+ appearance of depth.</p>
</div>
+ <p> An element with a three-dimensional transform that is not contained in
+ a <a class=term href="#d-rendering-context">3D rendering context</a>
+ renders with the appropriate transform applied, but does not intersect
+ with any other elements. The three-dimensional transform in this case can
+ be considered just as a painting effect, like two-dimensional transforms.
+ Similarly, the transform does not affect painting order. For example, a
+ transform with a positive Z translation may make an element look larger,
+ but does not cause that element to render in front of elements with no
+ translation in Z.
+
<p> An element with a three-dimensional transform that is contained in a <a
class=term href="#d-rendering-context">3D rendering context</a> can
visibly interact with other elements in that same 3D rendering context;
@@ -614,6 +659,35 @@
element, as described below.
<!-- More detail required, probably with matrices -->
+ <div class=example>
+ <pre>
+<style>
+div { height: 150px; width: 150px; }
+.container { perspective: 500px; border: 1px solid black; }
+.transformed { transform: rotateY(50deg); background-color: blue; }
+.child { transform-origin: top left; transform: rotateX(40deg); background-color: lime; }
+</style>
+
+<div class="container">
+ <div class="transformed">
+ <div class="child"></div>
+ </div>
+</div>
+</pre>
+
+ <p>This exmaple shows how nested 3D transforms are rendered in the absence
+ of <code>transform-style: preserve-3d</code>. The blue div is transformed
+ as in the previous example, with its rendering influenced by the
+ perspective on its parent element. The lime element also has a 3D
+ transform, which is a rotation about the X axis (anchored at the top, by
+ virtue of the transform-origin). However, the lime element is being
+ rendered into the plane of its parent because it is not a member of a 3D
+ rendering context; the parent is "flattening".</p>
+
+ <div class=figure> <img alt="Nested 3D transforms, with flattening"
+ height=200 src="examples/3d-rendering-context-flat.png" width=240></div>
+ </div>
+
<p>Elements establish and participate in 3D rendering contexts as follows:
<ul>
@@ -640,81 +714,30 @@
<p> The final value of the transform used to render an element in a <a
class=term href="#d-rendering-context">3D rendering context</a> is
- computed as follows:
-
- <ol><!-- Clarify pre- vs post-multiply? -->
- <!-- This needs to be more mathy -->
+ computed by accumulating a matrix as follows:
- <li>If the root of the <a class=term href="#d-rendering-context">3D
- rendering context</a> has a computed value of <a
- href="#perspective"><code class=property>perspective</code></a> which is
- not ‘<code class=property>none</code>’ and greater than zero,
- compute a perspective matrix as follows:
- <ol>
- <li>
- </ol>
- otherwise start with the identity matrix.
+ <ol>
+ <li>Start with the identity matrix
<li>For each containing block between the root of the <a class=term
href="#d-rendering-context">3D rendering context</a> and the element in
- question, compute a transformation matrix by:
+ question:
<ol>
- <li>applying perpsective and perspective-origin, if any
+ <li>multiply the accumulated matrix with the <a
+ href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> on the
+ element's containing block (if any). That contining block is not
+ necessarily a member of the 3D rendering context.
- <li>applying a translation equivalent to the horizontal and vertical
- offset of the element relative to its containing block as specified by
- CSS layout rules <!-- (tighten this!) -->
+ <li>apply to the accumulated matrix a translation equivalent to the
+ horizontal and vertical offset of the element relative to its
+ containing block as specified by the CSS visual formatting model.
+ <!-- (tighten this!) -->
- <li>applying transform and transform-origin, if any
+ <li>multiply the accumulated matrix with the <a
+ href="#TermTransformationMatrix"><i>transformation matrix</i></a>.
</ol>
- The target matrix is then multiplied with the matrix for this ancestor.
</ol>
- <div class="issue issue-marker">
- <p class=desc>Should intersection behavior be normative?</p>
- </div>
- <!-- Discuss whether an element that establishes a 3D rendering context also participates in it; notably,
- does the foreground/background of the element intersect with transformed members of the 3D rendering context? -->
- <!-- Discuss whether non-transformed memebers of the <span class="term">3D rendering context</span> participate in intersection -->
-
- <div class="issue issue-marker">
- <p class=desc>Does transform-style follow containing block, or parent
- element ancestry?</p>
- </div>
-
- <div class="issue issue-marker">
- <p class=desc>Does perspective establish a 3D rendering context?</p>
- </div>
-
- <div class=example>
- <pre>
-<style>
-div { height: 150px; width: 150px; }
-.container { perspective: 500px; border: 1px solid black; }
-.transformed { transform: rotateY(50deg); background-color: blue; }
-.child { transform-origin: top left; transform: rotateX(40deg); background-color: lime; }
-</style>
-
-<div class="container">
- <div class="transformed">
- <div class="child"></div>
- </div>
-</div>
-</pre>
-
- <p>This exmaple shows how nested 3D transforms are rendered in the absence
- of <code>transform-style: preserve-3d</code>. The blue div is transformed
- as in the previous example, with its rendering influenced by the
- perspective on its parent element. The lime element also has a 3D
- transform, which is a rotation about the X axis (anchored at the top, by
- virtue of the transform-origin). However, the lime element is being
- rendered into the plane of its parent because it is not a member of a 3D
- rendering context; the parent is "flattening".</p>
-
- <div class=figure> <img alt="Nested 3D transforms, with flattening"
- height=200 src="examples/3d-rendering-context-flat.png" width=240></div>
- </div>
-
<div class=example>
<pre>
<style>
@@ -736,6 +759,27 @@
height=200 src="examples/3d-rendering-context-3d.png" width=240></div>
</div>
+ <div class=issue>
+ <p class=desc>Should intersection behavior be normative?</p>
+ </div>
+
+ <p> Elements in the same <a class=term href="#d-rendering-context">3D
+ rendering context</a> may intersect with eachother. User agents should
+ subdivide the planes of intersecting elements as described by <a
+ href="http://en.wikipedia.org/wiki/Newell's_algorithm">Newell's
+ algorithm</a> to render intersection.
+
+ <p> Untransformed elements in a <a class=term
+ href="#d-rendering-context">3D rendering context</a> render on the Z=0
+ plane, yet may still intersect with transformed elements.
+
+ <p> Within a <a class=term href="#d-rendering-context">3D rendering
+ context</a>, the rendering order of non-intersecting elements is based on
+ their position on the Z axis after the application of the accumulated
+ transform. Elements at the same Z position render in <a
+ href="http://www.w3.org/TR/CSS2/zindex.html#painting-order">stacking
+ context order</a>.
+
<div class=example>
<pre>
<style>
@@ -874,7 +918,7 @@
<td> See below.
</table>
- <div class="issue issue-marker">
+ <div class=issue>
<p class=desc>We need to resolve whether the computed value is the same as
the specified value, or matrix().</p>
</div>
@@ -952,45 +996,6 @@
href="#transform-origin"><code
class=property>'transform-origin'</code></a> Property</h2>
- <div class="issue issue-marker">
- <p class=desc>Need to add 3D transform-origin variant in a way that is not
- ambiguous with the background-origin syntax (<a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15432">bug
- 15432</a>).</p>
- </div>
-
- <p> The <a href="#transform-origin"><code
- class=property>'transform-origin'</code></a> property establishes the
- origin of transformation for a coordinate system. This property is applied
- by first translating the element's coordinate system by the negated value
- of the property, then applying the local transform, then translating by
- the property value. This effectively moves the desired transformation
- origin of the element to (0,0) in the local coordinate system, then
- applies the local transform, then moves the element back to its original
- position.
-
- <p>If only one value is specified, the second value is assumed to be
- ‘<code class=property>center</code>’. If two values are given
- and at least one value is not a keyword, then the first value represents
- the horizontal position (or offset) and the second represents the vertical
- position (or offset). <var><percentage></var> and
- <var><length></var> values here represent an offset of the transform
- origin from the top left corner of the element's border box.
-
- <p>If three or four values are given, then each
- <var><percentage></var> or<var><length></var> represents an
- offset and must be preceded by a keyword, which specifies from which edge
- the offset is given. For example, ‘<code class=css>transform-origin:
- bottom 10px right 20px</code>’ represents a ‘<code
- class=css>10px</code>’ vertical offset up from the bottom edge and a
- ‘<code class=css>20px</code>’ horizontal offset leftward from
- the right edge. If three values are given, the missing offset is assumed
- to be zero.
-
- <p>Positive values represent an offset <em>inward</em> from the edge of the
- border box. Negative values represent an offset <em>outward</em> from the
- edge of the border box.
-
<table class=propdef>
<tbody>
<tr>
@@ -1016,7 +1021,7 @@
<tr>
<td> <em>Applies to:</em>
- <td> <a href="#TermTransformableElement">transformable element</a>
+ <td> <a href="#TermTransformableElement">transformable elements</a>
<tr>
<td> <em>Inherited:</em>
@@ -1039,12 +1044,41 @@
<td> For <length> the absolute value, otherwise a percentage
</table>
+ <p> The values of the <a href="#effects"><code
+ class=property>'transform'</code></a> and <a
+ href="#transform-origin"><code
+ class=property>'transform-origin'</code></a> properties are used to
+ compute the <a href="#TermTransformationMatrix"><i>transformation
+ matrix</i></a>, as described above.
+
+ <p>If only one value is specified, the second value is assumed to be
+ ‘<code class=property>center</code>’. If two values are given
+ and at least one value is not a keyword, then the first value represents
+ the horizontal position (or offset) and the second represents the vertical
+ position (or offset). <var><percentage></var> and
+ <var><length></var> values here represent an offset of the transform
+ origin from the top left corner of the element's border box.
+
+ <p>If three or four values are given, then each
+ <var><percentage></var> or<var><length></var> represents an
+ offset and must be preceded by a keyword, which specifies from which edge
+ the offset is given. For example, ‘<code class=css>transform-origin:
+ bottom 10px right 20px</code>’ represents a ‘<code
+ class=css>10px</code>’ vertical offset up from the bottom edge and a
+ ‘<code class=css>20px</code>’ horizontal offset leftward from
+ the right edge. If three values are given, the missing offset is assumed
+ to be zero.
+
+ <p>Positive values represent an offset <em>inward</em> from the edge of the
+ border box. Negative values represent an offset <em>outward</em> from the
+ edge of the border box.
+
<h3 id=svg-transform-origin><span class=secno>7.1. </span>The ‘<a
href="#transform-origin"><code
class=property>transform-origin</code></a>’ property for SVG
elements</h3>
- <div class="issue issue-marker">
+ <div class=issue>
<p class=desc>Should we use ‘<code
class=property>auto</code>’, or explicitly say that
transform-origin is 0 0 for SVG elements, 50% 50% for all other elements
@@ -1064,10 +1098,10 @@
</pre>
<div class=issue>
- <p class=desc>Need to determine how to extend transform-origin to allow it
- to affect the z-origin with three-dimensional transforms (<a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14647">Bug
- 14647</a>).
+ <p class=desc>Need to add 3D transform-origin variant in a way that is not
+ ambiguous with the background-origin syntax (<a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15432">bug
+ 15432</a>).</p>
</div>
<!-- ======================================================================================================= -->
@@ -1075,8 +1109,6 @@
href="#transform-style"><code class=property>'transform-style'</code></a>
Property</h2>
- <p> Property summary here.
-
<table class=propdef>
<tbody>
<tr>
@@ -1124,10 +1156,6 @@
href="#transform-style"><code class=property>transform-style</code></a>
establishes a stacking context.
- <div class="issue issue-marker">
- <p class=desc>Should this affect the computed value of transform-style?</p>
- </div>
-
<p> The following CSS property values require the user agent to create a
flattened representation of the descendant elements before they can be
applied, and therefore override the behavior of <a
@@ -1144,19 +1172,23 @@
class=property>none</code>’.</li>
<!-- Others? -->
</ul>
+
+ <div class=issue>
+ <p class=desc>Should this affect the computed value of transform-style?</p>
+ </div>
+
+ <p> The values of the <a href="#effects"><code
+ class=property>'transform'</code></a> and <a
+ href="#transform-origin"><code
+ class=property>'transform-origin'</code></a> properties are used to
+ compute the <a href="#TermTransformationMatrix"><i>transformation
+ matrix</i></a>, as described above.</p>
<!-- ======================================================================================================= -->
<h2 id=perspective-property><span class=secno>9. </span> The <a
href="#perspective"><code class=property>'perspective'</code></a> Property
</h2>
- <p> The <a href="#perspective"><code
- class=property>'perspective'</code></a> property applies the same
- transform as the <code class=css>perspective(<length>)</code>
- transform function, except that it applies only to elements whose
- containing block is the element with perspective, not to the transform on
- the element itself.
-
<table class=propdef>
<tbody>
<tr>
@@ -1207,7 +1239,14 @@
class=property>none</code>’ establishes a stacking context. It also
establishes a containing block (somewhat similar to position:relative),
just like the ‘<a href="#effects"><code
- class=property>transform</code></a>’ property does.</p>
+ class=property>transform</code></a>’ property does.
+
+ <p> The values of the <a href="#perspective"><code
+ class=property>perspective</code></a> and <a
+ href="#perspective-origin"><code
+ class=property>perspective-origin</code></a> properties are used to
+ compute the <a href="#TermPerspectiveMatrix"><i>perspective
+ matrix</i></a>, as described above.</p>
<!-- ======================================================================================================= -->
<h2 id=perspective-origin-property><span class=secno>10. </span> The <a
@@ -1265,8 +1304,12 @@
<td> Same as specified value.
</table>
- <p> The <a href="#perspective-origin"><code
- class=property>perspective-origin</code></a> property affects the</p>
+ <p> The values of the <a href="#perspective"><code
+ class=property>perspective</code></a> and <a
+ href="#perspective-origin"><code
+ class=property>perspective-origin</code></a> properties are used to
+ compute the <a href="#TermPerspectiveMatrix"><i>perspective
+ matrix</i></a>, as described above.</p>
<!-- ======================================================================================================= -->
<h2 id=backface-visibility-property><span class=secno>11. </span> The <a
@@ -1308,7 +1351,7 @@
<tr>
<td> <em>Applies to:</em>
- <td> block-level and inline-level elements
+ <td> <a href="#TermTransformableElement">transformable elements</a>
<tr>
<td> <em>Inherited:</em>
@@ -1500,22 +1543,18 @@
<dt> <code class=css>perspective(<length>)</code>
- <dd> specifies a perspective projection matrix. This matrix maps a
- <em>viewing cube</em> onto a pyramid whose base is infinitely far away
- from the viewer and whose peak represents the viewer's position. The
- viewable area is the region bounded by the four edges of the viewport
- (the portion of the browser 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. 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.
- <div class=issue>I think "viewport" is wrong here. It's the border box of
- the element with perspective.</div>
+ <dd> specifies a perspective projection matrix. This matrix scales points
+ in X and Y based on their Z value, scaling points with positive Z values
+ away from the origin, and those with negative Z values towards the
+ origin. Points on the z=0 plane are unchanged. 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. 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>
<!-- ======================================================================================================= -->
@@ -1742,12 +1781,12 @@
<h3 id=cssmatrix-interface><span class=secno>16.1. </span> CSSMatrix</h3>
- <div class="issue issue-marker">
+ <div class=issue>
<p class=desc>We actually describe a 3x2 matrix here, similar to <a
href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVGMatrix</a>.</p>
</div>
- <div class="issue issue-marker">
+ <div class=issue>
<p class=desc>We need to resolve how SVGMatrix and CSSMatrix work together
(<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15498">bug
15498</a>).</p>
@@ -2170,7 +2209,7 @@
<td>visible
- <td>block-level and inline-level elements
+ <td>transformable elements
<td>no
@@ -2236,7 +2275,7 @@
<td>0 0 for SVG elements, 50% 50% for all other elements
- <td>transformable element
+ <td>transformable elements
<td>no
Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.17
retrieving revision 1.18
diff -u -d -r1.17 -r1.18
--- Transforms.src.html 29 Jan 2012 16:52:54 -0000 1.17
+++ Transforms.src.html 29 Jan 2012 21:28:07 -0000 1.18
@@ -223,7 +223,7 @@
</p>
</dd>
- <dt id="TermPerspectiveMatrix"><dfn>transformation matrix</dfn></dt>
+ <dt id="TermTransformationMatrix"><dfn>transformation matrix</dfn></dt>
<dd>
<p>
A matrix computed from the values of the <code class="property">transform</code> and <code class="property">transform-origin</code> properties.
@@ -248,7 +248,9 @@
<p>
Specifying a value other than 'none' for the <code class="property">'transform'</code>
property establishes a new <em>local coordinate system</em> at the element that it is
- applied to. Transformations are cumulative. That is, elements establish their local
+ applied to. The mapping from where the element would have rendered into that local coordinate system
+ is given by the element's <a href="#TermTransformationMatrix"><i>transformation matrix</i></a>.
+ Transformations are cumulative. That is, elements establish their local
coordinate system within the coordinate system of their parent. From the perspective of the
user, an element effectively accumulates all the <code class="property">'transform'</code>
properties of its ancestors as well as any local transform applied to it. The accumulation
@@ -264,6 +266,17 @@
adding a Z axis perpendicular to the plane of the screen, that increases towards the viewer.
</p>
<p>
+ The <a href="#TermTransformationMatrix"><i>transformation matrix</i></a> is computed
+ from the <code class="property">transform</code> and <code class="property">transform-origin</code> properties
+ as follows:
+ <ol>
+ <li>Start with the identity matrix.</li>
+ <li>Translate by the computed X, Y and Z values of <code class="property">transform-origin</code></li>
+ <li>Multiply by each of the transform functions in <code class="property">transform</code> property in turn</li>
+ <li>Translate by the negated computed X, Y and Z values of <code class="property">transform-origin</code></li>
+ </ol>
+ </p>
+ <p>
Transforms apply to <a href="#TermTransformableElement">transformable elements</a>.
</p>
@@ -340,20 +353,11 @@
and intersect with each other. Whether they do so depends on whether the element is a member
of a <span class="term">3D rendering context</span>, as described below.
</p>
- <div class="issue issue-marker">
+ <div class="issue">
<p class="desc">This description does not exactly match what WebKit implements. Perhaps
it should be changed to match current implementations?</p>
</div>
- <p>
- An element with a three-dimensional transform that is not contained in a
- <span class="term">3D rendering context</span> renders with the appropriate
- transform applied, but does not intersect with any other elements. The three-dimensional
- transform in this case can be considered just as a painting effect, like two-dimensional
- transforms. Similarly, the transform does not affect painting order. For example, a transform with a
- positive Z translation may make an element look larger, but does not cause that element
- to render in front of elements with no translation in Z.
- </p>
-
+
<div class="example">
<p>This example shows the effect of three-dimensional transform applied to an element.
</p>
@@ -363,19 +367,34 @@
.container { border: 1px solid black; }
.transformed { transform: rotateY(50deg); }
</style>
-</pre>
-<pre>
+
<div class="container">
<div class="transformed"></div>
</div>
</pre>
-<div class="figure">
- <img src="examples/simple-3d-example.png" width="210" height="190" alt="Div with a rotateY transform.">
-</div>
+ <div class="figure">
+ <img src="examples/simple-3d-example.png" width="210" height="190" alt="Div with a rotateY transform.">
+ </div>
<p>The transform is a 50° rotation about the vertical, Y axis. Note how this makes the blue box appear
narrower, but not three-dimensional.
</p>
</div>
+
+ <p>
+ The <code class="property">perspective</code> and <code class="property">perspective-origin</code>
+ properties can be used to add a feeling of depth to a scene by making elements higher on the Z axis
+ (closer to the viewer) appear larger, and those futher away to appear smaller.
+ </p>
+ <p>
+ The <a href="#TermPerspectiveMatrix"><i>perspective matrix</i></a> is computed as follows:
+ <!-- Make this more mathy, with matrices? -->
+ <ol>
+ <li>Start with the identity matrix.</li>
+ <li>Translate by the computed X and Y values of <code class="property">perspective-origin</code></li>
+ <li>Multiply by the matrix that would be obtained from the <code class="css">perspective(<length>)</code> transform function, where the length is provided by the value of the <code class="property">perspective</code> property</li>
+ <li>Translate by the negated computed X and Y values of <code class="property">perspective-origin</code></li>
+ </ol>
+ </p>
<div class="example">
<p>This example shows how perspective can be used to cause three-dimensional transforms to appear more realistic.
@@ -386,23 +405,31 @@
.container { perspective: 500px; border: 1px solid black; }
.transformed { transform: rotateY(50deg); }
</style>
-</pre>
-<pre>
+
<div class="container">
<div class="transformed"></div>
</div>
</pre>
-<div class="figure">
- <img src="examples/simple-perspective-example.png" width="210" height="190" alt="Div with a rotateY transform,
- and perspective on its container">
-</div>
- <p>The inner element has the same transform as in Example 1, but its rendering is now influenced by the perspective
+ <div class="figure">
+ <img src="examples/simple-perspective-example.png" width="210" height="190" alt="Div with a rotateY transform,
+ and perspective on its container">
+ </div>
+ <p>The inner element has the same transform as in the previous example, but its rendering is now influenced by the perspective
property on its parent element. Perspective causes vertices that have positive Z coordinates (closer to the viewer)
to be scaled up in X and Y, and those futher away (negative Z coordinates) to be scaled down, giving an appearance of depth.
</p>
</div>
<p>
+ An element with a three-dimensional transform that is not contained in a
+ <span class="term">3D rendering context</span> renders with the appropriate
+ transform applied, but does not intersect with any other elements. The three-dimensional
+ transform in this case can be considered just as a painting effect, like two-dimensional
+ transforms. Similarly, the transform does not affect painting order. For example, a transform with a
+ positive Z translation may make an element look larger, but does not cause that element
+ to render in front of elements with no translation in Z.
+ </p>
+ <p>
An element with a three-dimensional transform that is contained in a
<span class="term">3D rendering context</span> can visibly interact with other elements
in that same 3D rendering context; the set of elements participating in the same
@@ -415,6 +442,28 @@
<!-- More detail required, probably with matrices -->
</p>
+ <div class="example">
+<pre>
+<style>
+div { height: 150px; width: 150px; }
+.container { perspective: 500px; border: 1px solid black; }
+.transformed { transform: rotateY(50deg); background-color: blue; }
+.child { transform-origin: top left; transform: rotateX(40deg); background-color: lime; }
+</style>
+
+<div class="container">
+ <div class="transformed">
+ <div class="child"></div>
+ </div>
+</div>
+</pre>
+ <p>This exmaple shows how nested 3D transforms are rendered in the absence of <code>transform-style: preserve-3d</code>. The blue div is transformed as in the previous example, with its rendering influenced by the perspective on its parent element. The lime element also has a 3D transform, which is a rotation about the X axis (anchored at the top, by virtue of the transform-origin). However, the lime element is being rendered into the plane of its parent because it is not a member of a 3D rendering context; the parent is "flattening".
+ </p>
+ <div class="figure">
+ <img src="examples/3d-rendering-context-flat.png" width="240" height="200" alt="Nested 3D transforms, with flattening">
+ </div>
+ </div>
+
<p>Elements establish and participate in 3D rendering contexts as follows:</p>
<ul>
<li>
@@ -437,67 +486,23 @@
</ul>
<p>
The final value of the transform used to render an element in a <span class="term">3D rendering context</span>
- is computed as follows:
+ is computed by accumulating a matrix as follows:
</p>
<ol>
- <!-- Clarify pre- vs post-multiply? -->
- <!-- This needs to be more mathy -->
- <li>If the root of the <span class="term">3D rendering context</span> has a computed value of <code class="property">perspective</code> which is not 'none' and greater than zero, compute a perspective matrix as follows:
- <ol>
- <li></li>
- </ol>
- otherwise start with the identity matrix.
- </li>
+ <li>Start with the identity matrix</li>
<li>For each containing block between the root of the <span class="term">3D rendering context</span>
- and the element in question, compute a transformation matrix by:
+ and the element in question:
<ol>
- <li>applying perpsective and perspective-origin, if any</li>
- <li>applying a translation equivalent to the horizontal and vertical offset of the element relative to
- its containing block as specified by CSS layout rules <!-- (tighten this!) --></li>
- <li>applying transform and transform-origin, if any</li>
+ <li>multiply the accumulated matrix with the <a href="#TermPerspectiveMatrix"><i>perspective matrix</i></a>
+ on the element's containing block (if any). That contining block is not necessarily a member
+ of the 3D rendering context.</li>
+ <li>apply to the accumulated matrix a translation equivalent to the horizontal and vertical offset of the element relative to
+ its containing block as specified by the CSS visual formatting model. <!-- (tighten this!) --></li>
+ <li>multiply the accumulated matrix with the <a href="#TermTransformationMatrix"><i>transformation matrix</i></a>.</li>
</ol>
- The target matrix is then multiplied with the matrix for this ancestor.
</li>
</ol>
-
- <div class="issue issue-marker">
- <p class="desc">Should intersection behavior be normative?</p>
- </div>
-
- <!-- Discuss whether an element that establishes a 3D rendering context also participates in it; notably,
- does the foreground/background of the element intersect with transformed members of the 3D rendering context? -->
- <!-- Discuss whether non-transformed memebers of the <span class="term">3D rendering context</span> participate in intersection -->
-
- <div class="issue issue-marker">
- <p class="desc">Does transform-style follow containing block, or parent element ancestry?</p>
- </div>
- <div class="issue issue-marker">
- <p class="desc">Does perspective establish a 3D rendering context?</p>
- </div>
-
-
- <div class="example">
-<pre>
-<style>
-div { height: 150px; width: 150px; }
-.container { perspective: 500px; border: 1px solid black; }
-.transformed { transform: rotateY(50deg); background-color: blue; }
-.child { transform-origin: top left; transform: rotateX(40deg); background-color: lime; }
-</style>
-
-<div class="container">
- <div class="transformed">
- <div class="child"></div>
- </div>
-</div>
-</pre>
- <p>This exmaple shows how nested 3D transforms are rendered in the absence of <code>transform-style: preserve-3d</code>. The blue div is transformed as in the previous example, with its rendering influenced by the perspective on its parent element. The lime element also has a 3D transform, which is a rotation about the X axis (anchored at the top, by virtue of the transform-origin). However, the lime element is being rendered into the plane of its parent because it is not a member of a 3D rendering context; the parent is "flattening".
- </p>
- <div class="figure">
- <img src="examples/3d-rendering-context-flat.png" width="240" height="200" alt="Nested 3D transforms, with flattening">
- </div>
- </div>
-
+
<div class="example">
<pre>
<style>
@@ -514,6 +519,24 @@
</div>
</div>
+ <div class="issue">
+ <p class="desc">Should intersection behavior be normative?</p>
+ </div>
+ <p>
+ Elements in the same <span class="term">3D rendering context</span> may intersect with eachother. User agents should
+ subdivide the planes of intersecting elements as described by
+ <a href="http://en.wikipedia.org/wiki/Newell's_algorithm">Newell's algorithm</a> to render intersection.
+ </p>
+ <p>
+ Untransformed elements in a <span class="term">3D rendering context</span> render on the Z=0 plane, yet may still
+ intersect with transformed elements.
+ </p>
+ <p>
+ Within a <span class="term">3D rendering context</span>, the rendering order of non-intersecting elements is
+ based on their position on the Z axis after the application of the accumulated transform. Elements at the same
+ Z position render in <a href="http://www.w3.org/TR/CSS2/zindex.html#painting-order">stacking context order</a>.
+ </p>
+
<div class="example">
<pre>
<style>
@@ -682,7 +705,7 @@
</tbody>
</table>
- <div class="issue issue-marker">
+ <div class="issue">
<p class="desc">We need to resolve whether the computed value is the same as the specified value, or matrix().</p>
</div>
<p>The computed value of the transform property is a matrix() or matrix3d() value that describes the matrix that results from concatenating the individual transform functions. If the resulting matrix can be represented as a two-dimensional matrix with no loss of information, then a matrix() value is returned, otherwise a matrix3d() value. For elements with no transform applied, the computed value is 'none'.</p>
@@ -731,45 +754,6 @@
<h2 id="transform-origin-property">
The <code class="property">'transform-origin'</code> Property
</h2>
- <div class="issue issue-marker">
- <p class="desc">Need to add 3D transform-origin variant in a way that is not ambiguous
- with the background-origin syntax (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15432">bug 15432</a>).</p>
- </div>
- <p>
- The <code class="property">'transform-origin'</code> property
- establishes the origin of transformation for a coordinate system. This property
- is applied by first translating the element's coordinate system by the negated value of the
- property, then applying the local transform, then translating by the
- property value. This effectively moves the desired transformation origin
- of the element to (0,0) in the local coordinate system, then applies
- the local transform, then moves the element back to its original
- position.
- </p>
-
- <p>If only one value is specified, the second value is assumed to be
- 'center'. If two values are given and at least one value is not a keyword,
- then the first value represents the horizontal position (or offset) and
- the second represents the vertical position (or
- offset). <var><percentage></var> and <var><length></var>
- values here represent an offset of the transform origin from the top left corner
- of the element's border box.
- </p>
-
- <p>If three or four values are given, then
- each <var><percentage></var> or<var><length></var>
- represents an offset and must be preceded by a keyword,
- which specifies from which edge the offset is given. For example,
- ''transform-origin: bottom 10px right 20px'' represents a
- ''10px'' vertical offset up from the bottom edge and a
- ''20px'' horizontal offset leftward from the right edge. If
- three values are given, the missing offset is assumed to be zero.
- </p>
-
- <p>Positive values represent an offset <em>inward</em> from the edge of
- the border box. Negative values represent an offset
- <em>outward</em> from the edge of the border box.
- </p>
-
<table class="propdef">
<tbody>
<tr>
@@ -803,7 +787,7 @@
<em>Applies to:</em>
</td>
<td>
- <a href="#TermTransformableElement">transformable element</a>
+ <a href="#TermTransformableElement">transformable elements</a>
</td>
</tr>
<tr>
@@ -840,10 +824,40 @@
</tr>
</tbody>
</table>
+
+ <p>
+ The values of the <code class="property">'transform'</code> and
+ <code class="property">'transform-origin'</code> properties are used to compute the
+ <a href="#TermTransformationMatrix"><i>transformation matrix</i></a>, as described above.
+ </p>
+
+ <p>If only one value is specified, the second value is assumed to be
+ 'center'. If two values are given and at least one value is not a keyword,
+ then the first value represents the horizontal position (or offset) and
+ the second represents the vertical position (or
+ offset). <var><percentage></var> and <var><length></var>
+ values here represent an offset of the transform origin from the top left corner
+ of the element's border box.
+ </p>
+
+ <p>If three or four values are given, then
+ each <var><percentage></var> or<var><length></var>
+ represents an offset and must be preceded by a keyword,
+ which specifies from which edge the offset is given. For example,
+ ''transform-origin: bottom 10px right 20px'' represents a
+ ''10px'' vertical offset up from the bottom edge and a
+ ''20px'' horizontal offset leftward from the right edge. If
+ three values are given, the missing offset is assumed to be zero.
+ </p>
+
+ <p>Positive values represent an offset <em>inward</em> from the edge of
+ the border box. Negative values represent an offset
+ <em>outward</em> from the edge of the border box.
+ </p>
<h3 id="svg-transform-origin">The 'transform-origin' property for SVG elements</h3>
- <div class="issue issue-marker">
+ <div class="issue">
<p class="desc">Should we use 'auto', or explicitly say that transform-origin is 0 0 for SVG elements, 50% 50% for all other elements (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15504">bug 15504</a>)?</p>
</div>
<p>To keep the 'transform' property compatible with existing SVG content that assumed a top/left
@@ -855,18 +869,15 @@
}
</pre>
<div class="issue">
- <p class="desc">Need to determine how to extend transform-origin to allow it to affect the z-origin
- with three-dimensional transforms (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14647">Bug 14647</a>).
- </div
+ <p class="desc">Need to add 3D transform-origin variant in a way that is not ambiguous
+ with the background-origin syntax (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15432">bug 15432</a>).</p>
+ </div>
<!-- ======================================================================================================= -->
<h2 id="transform-style-property">
The <code class="property">'transform-style'</code> Property
</h2>
- <p>
- Property summary here.
- </p>
<table class="propdef">
<tbody>
<tr>
@@ -941,9 +952,6 @@
establishes a stacking context.
</p>
- <div class="issue issue-marker">
- <p class="desc">Should this affect the computed value of transform-style?</p>
- </div>
<p>
The following CSS property values require the user agent to create a flattened representation of
the descendant elements before they can be applied, and therefore override the behavior of
@@ -955,19 +963,20 @@
<!-- Others? -->
</ul>
</p>
+ <div class="issue">
+ <p class="desc">Should this affect the computed value of transform-style?</p>
+ </div>
+ <p>
+ The values of the <code class="property">'transform'</code> and
+ <code class="property">'transform-origin'</code> properties are used to compute the
+ <a href="#TermTransformationMatrix"><i>transformation matrix</i></a>, as described above.
+ </p>
<!-- ======================================================================================================= -->
<h2 id="perspective-property">
The <code class="property">'perspective'</code> Property
</h2>
- <p>
- The <code class="property">'perspective'</code> property applies the
- same transform as the <code class="css">perspective(<length>)</code> transform
- function, except that it applies only to elements whose containing block is the
- element with perspective, not to the transform on the element itself.
- </p>
-
<table class="propdef">
<tbody>
<tr>
@@ -1046,6 +1055,10 @@
stacking context. It also establishes a containing block (somewhat
similar to position:relative), just like the 'transform' property does.
</p>
+ <p>
+ The values of the <code class="property">perspective</code> and <code class="property">perspective-origin</code>
+ properties are used to compute the <a href="#TermPerspectiveMatrix"><i>perspective matrix</i></a>, as described above.
+ </p>
<!-- ======================================================================================================= -->
@@ -1129,7 +1142,8 @@
</tbody>
</table>
<p>
- The <code class="property">perspective-origin</code> property affects the
+ The values of the <code class="property">perspective</code> and <code class="property">perspective-origin</code>
+ properties are used to compute the <a href="#TermPerspectiveMatrix"><i>perspective matrix</i></a>, as described above.
</p>
<!-- ======================================================================================================= -->
@@ -1185,7 +1199,7 @@
<em>Applies to:</em>
</td>
<td>
- block-level and inline-level elements
+ <a href="#TermTransformableElement">transformable elements</a>
</td>
</tr>
<tr>
@@ -1373,21 +1387,17 @@
<code class="css">perspective(<length>)</code>
</dt>
<dd>
- specifies a perspective projection matrix. This matrix maps a <em>viewing cube</em> onto a pyramid whose
- base is infinitely far away from the viewer and whose peak represents the viewer's position. The
- viewable area is the region bounded by the four edges of the viewport (the portion of the browser
- 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
+ specifies a perspective projection matrix. This matrix scales points in X and Y based on their Z value,
+ scaling points with positive Z values away from the origin, and those with negative Z values towards the
+ origin. Points on the z=0 plane are unchanged. 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. 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.
- <div class="issue">I think "viewport" is wrong here. It's the border box of the element with perspective.</div>
</dd>
</dl>
-
<!-- ======================================================================================================= -->
<h2 id="transform-values">
@@ -1630,10 +1640,10 @@
CSSMatrix
</h3>
- <div class="issue issue-marker">
+ <div class="issue">
<p class="desc">We actually describe a 3x2 matrix here, similar to <a href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVGMatrix</a>.</p>
</div>
- <div class="issue issue-marker">
+ <div class="issue">
<p class="desc">We need to resolve how SVGMatrix and CSSMatrix work together (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15498">bug 15498</a>).</p>
</div>
Received on Sunday, 29 January 2012 21:28:13 UTC