- From: Simon Fraser via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 27 Jan 2012 07:10:15 +0000
- To: public-css-commits@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>
+<div class="container">
+ <div class="transformed"></div>
+</div>
+</pre>
- <div class=figure></div>
+ <p>The transform is a 50° 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>
+<div class="container">
+ <div class="transformed"></div>
+</div>
+</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>
+<div class="container">
+ <div class="transformed"></div>
+</div>
+</pre>
+ <p>The transform is a 50° 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>
+<div class="container">
+ <div class="transformed"></div>
+</div>
+</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