- From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
- Date: Sun, 29 Jan 2012 11:16:23 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv22736
Modified Files:
ChangeLog Overview.html Transforms.src.html
Log Message:
2012-01-29 simon.fraser@apple.com
Add more examples, with source files, to the 3D Rendering Context section.
Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-transforms/ChangeLog,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -d -r1.2 -r1.3
--- ChangeLog 29 Jan 2012 10:09:57 -0000 1.2
+++ ChangeLog 29 Jan 2012 11:16:21 -0000 1.3
@@ -1,4 +1,7 @@
2012-01-29 simon.fraser@apple.com
+ Add more examples, with source files, to the 3D Rendering Context section.
+
+2012-01-29 simon.fraser@apple.com
Minor edits in various places.
Made the issue-markers float:left and clear:both, so they don't overlap.
Fix missing 'the': https://www.w3.org/Bugs/Public/show_bug.cgi?id=15757
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -d -r1.12 -r1.13
--- Overview.html 29 Jan 2012 10:09:58 -0000 1.12
+++ Overview.html 29 Jan 2012 11:16:21 -0000 1.13
@@ -552,9 +552,11 @@
an element.</p>
<pre>
+<style>
div { height: 150px; width: 150px; }
.container { border: 1px solid black; }
.transformed { transform: rotateY(50deg); }
+</style>
</pre>
<pre>
@@ -575,9 +577,11 @@
three-dimensional transforms to appear more realistic.</p>
<pre>
+<style>
div { height: 150px; width: 150px; }
.container { perspective: 500px; border: 1px solid black; }
.transformed { transform: rotateY(50deg); }
+</style>
</pre>
<pre>
@@ -673,29 +677,93 @@
<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>Example of simple 3D rendering context</p>
+ <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></div>
+ <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>
+div { height: 150px; width: 150px; }
+.container { perspective: 500px; border: 1px solid black; }
+.transformed { <b>transform-style: preserve-3d</b>; transform: rotateY(50deg); background-color: blue; }
+.child { transform-origin: top left; transform: rotateX(40deg); background-color: lime; }
+</style>
</pre>
- <p>Example of deeper 3D rendering context</p>
+ <p>This example is identical to the previous example, with the addition of
+ <code>transform-style: preserve-3d</code> on the blue element. The blue
+ element now establishes a 3D rendering context, of which the lime element
+ is a member. Now both blue and lime elements share a common
+ three-dimensional space, so the lime element renders as tilting out from
+ its parent, influenced by the perspective on the container.</p>
- <div class=figure></div>
+ <div class=figure> <img alt="Nested 3D transforms, with preserve-3d."
+ height=200 src="examples/3d-rendering-context-3d.png" width=240></div>
</div>
<div class=example>
<pre>
+<style>
+.container {
+ background-color: rgba(0, 0, 0, 0.3);
+ transform-style: preserve-3d;
+ perspective: 500px;
+}
+.container > div {
+ position: absolute;
+ left: 0;
+}
+.container > :first-child {
+ transform: rotateY(45deg);
+ background-color: orange;
+ top: 10px;
+ height: 135px;
+}
+.container > :last-child {
+ transform: translateZ(40px);
+ background-color: rgba(0, 0, 255, 0.75);
+ top: 50px;
+ height: 100px;
+}
+</style>
+
+<div class="container">
+ <div></div>
+ <div></div>
+</div>
</pre>
- <p>Example of flattening inside 3D rendering context</p>
+ <p> This example shows show elements in a 3D rendering context can
+ intersect. The container element establishes a 3D rendering context for
+ itself and its two children. The children intersect with eachother, and
+ the orange element also intersects with the container.</p>
- <div class=figure></div>
+ <div class=figure> <img alt="Intersecting sibling elements." height=200
+ src="examples/3d-intersection.png" width=200></div>
</div>
<!--
<p>
Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.15
retrieving revision 1.16
diff -u -d -r1.15 -r1.16
--- Transforms.src.html 29 Jan 2012 10:09:58 -0000 1.15
+++ Transforms.src.html 29 Jan 2012 11:16:21 -0000 1.16
@@ -358,9 +358,11 @@
<p>This example shows the effect of three-dimensional transform applied to an element.
</p>
<pre>
+<style>
div { height: 150px; width: 150px; }
.container { border: 1px solid black; }
.transformed { transform: rotateY(50deg); }
+</style>
</pre>
<pre>
<div class="container">
@@ -379,9 +381,11 @@
<p>This example shows how perspective can be used to cause three-dimensional transforms to appear more realistic.
</p>
<pre>
+<style>
div { height: 150px; width: 150px; }
.container { perspective: 500px; border: 1px solid black; }
.transformed { transform: rotateY(50deg); }
+</style>
</pre>
<pre>
<div class="container">
@@ -468,30 +472,83 @@
<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>Example of simple 3D rendering context
+ <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>
+div { height: 150px; width: 150px; }
+.container { perspective: 500px; border: 1px solid black; }
+.transformed { <b>transform-style: preserve-3d</b>; transform: rotateY(50deg); background-color: blue; }
+.child { transform-origin: top left; transform: rotateX(40deg); background-color: lime; }
+</style>
</pre>
- <p>Example of deeper 3D rendering context
+ <p>This example is identical to the previous example, with the addition of <code>transform-style: preserve-3d</code> on the blue element. The blue element now establishes a 3D rendering context, of which the lime element is a member. Now both blue and lime elements share a common three-dimensional space, so the lime element renders as tilting out from its parent, influenced by the perspective on the container.
</p>
<div class="figure">
+ <img src="examples/3d-rendering-context-3d.png" width="240" height="200" alt="Nested 3D transforms, with preserve-3d.">
</div>
</div>
- <div class="example">
+ <div class="example">
<pre>
+<style>
+.container {
+ background-color: rgba(0, 0, 0, 0.3);
+ transform-style: preserve-3d;
+ perspective: 500px;
+}
+.container > div {
+ position: absolute;
+ left: 0;
+}
+.container > :first-child {
+ transform: rotateY(45deg);
+ background-color: orange;
+ top: 10px;
+ height: 135px;
+}
+.container > :last-child {
+ transform: translateZ(40px);
+ background-color: rgba(0, 0, 255, 0.75);
+ top: 50px;
+ height: 100px;
+}
+</style>
+
+<div class="container">
+ <div></div>
+ <div></div>
+</div>
</pre>
- <p>Example of flattening inside 3D rendering context
- </p>
- <div class="figure">
+ <p>
+ This example shows show elements in a 3D rendering context can intersect. The container element establishes
+ a 3D rendering context for itself and its two children. The children intersect with eachother, and
+ the orange element also intersects with the container.
+ </p>
+ <div class="figure">
+ <img src="examples/3d-intersection.png" width="200" height="200" alt="Intersecting sibling elements.">
+ </div>
</div>
- </div>
+
<!--
Received on Sunday, 29 January 2012 11:16:29 UTC