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

csswg/css3-transforms ChangeLog,1.2,1.3 Overview.html,1.12,1.13 Transforms.src.html,1.15,1.16

From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
Date: Sun, 29 Jan 2012 11:16:23 +0000
To: public-css-commits@w3.org
Message-Id: <E1RrSkC-0005vM-0F@lionel-hutz.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>
+&lt;style&gt;
 div { height: 150px; width: 150px; }
 .container { border: 1px solid black; }
 .transformed { transform: rotateY(50deg); }
+&lt;/style&gt;
 </pre>
 
    <pre>
@@ -575,9 +577,11 @@
     three-dimensional transforms to appear more realistic.</p>
 
    <pre>
+&lt;style&gt;
 div { height: 150px; width: 150px; }
 .container { perspective: 500px; border: 1px solid black; }
 .transformed { transform: rotateY(50deg); }
+&lt;/style&gt;
 </pre>
 
    <pre>
@@ -673,29 +677,93 @@
 
   <div class=example>
    <pre>
+&lt;style&gt;
+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; }
+&lt;/style&gt;
+
+&lt;div class="container"&gt;
+    &lt;div class="transformed"&gt;
+      &lt;div class="child"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
 </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>
+&lt;style&gt;
+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; }
+&lt;/style&gt;
 </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>
+&lt;style&gt;
+.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;
+}
+&lt;/style&gt;
+
+&lt;div class="container"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
 </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>
+&lt;style&gt;
 div { height: 150px; width: 150px; }
 .container { border: 1px solid black; }
 .transformed { transform: rotateY(50deg); }
+&lt;/style&gt;
 </pre>
 <pre>
 &lt;div class="container"&gt;
@@ -379,9 +381,11 @@
                 <p>This example shows how perspective can be used to cause three-dimensional transforms to appear more realistic.
                 </p>
 <pre>
+&lt;style&gt;
 div { height: 150px; width: 150px; }
 .container { perspective: 500px; border: 1px solid black; }
 .transformed { transform: rotateY(50deg); }
+&lt;/style&gt;
 </pre>
 <pre>
 &lt;div class="container"&gt;
@@ -468,30 +472,83 @@
 
               <div class="example">
 <pre>
+&lt;style&gt;
+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; }
+&lt;/style&gt;
+
+&lt;div class="container"&gt;
+    &lt;div class="transformed"&gt;
+      &lt;div class="child"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
 </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>
+&lt;style&gt;
+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; }
+&lt;/style&gt;
 </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>
+&lt;style&gt;
+.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;
+}
+&lt;/style&gt;
+
+&lt;div class="container"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
 </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

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