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

csswg/css3-transforms Overview.html,1.7,1.8 Transforms.src.html,1.10,1.11

From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 27 Jan 2012 07:10:15 +0000
To: public-css-commits@w3.org
Message-Id: <E1Rqfwt-0007VR-J8@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv28823

Modified Files:
	Overview.html Transforms.src.html 
Log Message:
Added two simple 3D examples


Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -d -r1.7 -r1.8
--- Overview.html	26 Jan 2012 17:14:04 -0000	1.7
+++ Overview.html	27 Jan 2012 07:10:13 -0000	1.8
@@ -112,15 +112,15 @@
 
    <h1>CSS transforms</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 January
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 January
     2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd> <a
-     href="http://www.w3.org/TR/2012/ED-css3-2d-transforms-20120126/">http://dev.w3.org/csswg/css3-2d-transforms/</a>
-     <!--http://www.w3.org/TR/2012/WD-css3-2d-transforms-20120126-->
+     href="http://www.w3.org/TR/2012/ED-css3-2d-transforms-20120127/">http://dev.w3.org/csswg/css3-2d-transforms/</a>
+     <!--http://www.w3.org/TR/2012/WD-css3-2d-transforms-20120127-->
 
     <dt>Latest version:
 
@@ -318,13 +318,16 @@
 
    <li><a href="#changes"><span class=secno>17. </span>Changes</a>
     <ul class=toc>
-     <li><a href="#changes_on_January_26_2012"><span class=secno>17.1.
+     <li><a href="#changes_on_January_27_2012"><span class=secno>17.1.
+      </span> Changes by Simon Fraser on January 27 2012 </a>
+
+     <li><a href="#changes_on_January_26_2012"><span class=secno>17.2.
       </span> Changes by Simon Fraser on January 26 2012 </a>
 
-     <li><a href="#changes_on_January_25_2012"><span class=secno>17.2.
+     <li><a href="#changes_on_January_25_2012"><span class=secno>17.3.
       </span> Changes by Simon Fraser on January 25 2012 </a>
 
-     <li><a href="#changes_from_January_24_2012"><span class=secno>17.3.
+     <li><a href="#changes_from_January_24_2012"><span class=secno>17.4.
       </span> Changes from January 24<sup>th</sup> 2012 version </a>
     </ul>
 
@@ -546,12 +549,53 @@
    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>
+
    <pre>
+div { height: 150px; width: 150px; }
+.container { border: 1px solid black; }
+.transformed { transform: rotateY(50deg); }
 </pre>
 
-   <p>Insert example of simple 3d transform.</p>
+   <pre>
+&lt;div class="container"&gt;
+    &lt;div class="transformed"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
 
-   <div class=figure></div>
+   <p>The transform is a 50&deg; rotation about the vertical Y axis. Note how
+    this makes the gray box appear narrower, but not three-dimensional.</p>
+
+   <div class=figure> <img alt="Div with a rotateY transform." height=190
+    src="examples/simple-3d-example.png" width=210></div>
+  </div>
+
+  <div class=example>
+   <p>This example shows how perspective can be used to cause
+    three-dimensional transforms to appear more realistic.</p>
+
+   <pre>
+div { height: 150px; width: 150px; }
+.container { perspective: 500px; border: 1px solid black; }
+.transformed { transform: rotateY(50deg); }
+</pre>
+
+   <pre>
+&lt;div class="container"&gt;
+    &lt;div class="transformed"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+   <p>The inner element has the same transform as before, 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.</p>
+
+   <div class=figure> <img
+    alt="Div with a rotateY transform,                     and perspective on its container"
+    height=190 src="examples/simple-perspective-example.png" width=210></div>
   </div>
 
   <p> An element with a three-dimensional transform that is contained in a
@@ -1924,7 +1968,14 @@
 
   <h2 id=changes><span class=secno>17. </span>Changes</h2>
 
-  <h3 id="changes_on_January_26_2012"><span class=secno>17.1. </span> Changes
+  <h3 id="changes_on_January_27_2012"><span class=secno>17.1. </span> Changes
+   by Simon Fraser on January 27 2012</h3>
+
+  <ul>
+   <li>Added two simple 3D examples.
+  </ul>
+
+  <h3 id="changes_on_January_26_2012"><span class=secno>17.2. </span> Changes
    by Simon Fraser on January 26 2012</h3>
 
   <ul>
@@ -1936,7 +1987,7 @@
     normative text describing how 3D is rendered
   </ul>
 
-  <h3 id="changes_on_January_25_2012"><span class=secno>17.2. </span> Changes
+  <h3 id="changes_on_January_25_2012"><span class=secno>17.3. </span> Changes
    by Simon Fraser on January 25 2012</h3>
 
   <ul>
@@ -1953,7 +2004,7 @@
     15598</a>, adding a note about unitless 0 in angles.
   </ul>
 
-  <h3 id="changes_from_January_24_2012"><span class=secno>17.3. </span>
+  <h3 id="changes_from_January_24_2012"><span class=secno>17.4. </span>
    Changes from <a
    href="http://www.w3.org/TR/2012/ED-css3-2d-transforms-20110124/">January
    24<sup>th</sup> 2012</a> version</h3>

Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.10
retrieving revision 1.11
diff -u -d -r1.10 -r1.11
--- Transforms.src.html	26 Jan 2012 17:14:05 -0000	1.10
+++ Transforms.src.html	27 Jan 2012 07:10:13 -0000	1.11
@@ -354,14 +354,49 @@
               </p>
               
               <div class="example">
+                <p>This example shows the effect of three-dimensional transform applied to an element.
+                </p>
 <pre>
+div { height: 150px; width: 150px; }
+.container { border: 1px solid black; }
+.transformed { transform: rotateY(50deg); }
 </pre>
-                <p>Insert example of simple 3d transform.
+<pre>
+&lt;div class="container"&gt;
+    &lt;div class="transformed"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>  
+                <p>The transform is a 50&deg; rotation about the vertical Y axis. Note how this makes the gray box appear
+                  narrower, but not three-dimensional.
                 </p>
                 <div class="figure">
+                  <img src="examples/simple-3d-example.png" width="210" height="190" alt="Div with a rotateY transform.">
                 </div>
               </div>
               
+              <div class="example">
+                <p>This example shows how perspective can be used to cause three-dimensional transforms to appear more realistic.
+                </p>
+<pre>
+div { height: 150px; width: 150px; }
+.container { perspective: 500px; border: 1px solid black; }
+.transformed { transform: rotateY(50deg); }
+</pre>
+<pre>
+&lt;div class="container"&gt;
+    &lt;div class="transformed"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>  
+                <p>The inner element has the same transform as before, 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.
+                </p>
+                <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>
+              </div>
+
               <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
@@ -1875,6 +1910,13 @@
 
         <h2 id="changes">Changes</h2>
 
+        <h3 id="changes_on_January_27_2012">
+          Changes by Simon Fraser on January 27 2012
+          <ul>
+            <li>Added two simple 3D examples.</li>
+          </ul>
+        </h3>
+
         <h3 id="changes_on_January_26_2012">
           Changes by Simon Fraser on January 26 2012
           <ul>
Received on Friday, 27 January 2012 07:10:18 UTC

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