Skip to content

Commit 8280819

Browse files
smfrsmfr
committed
Added two simple 3D examples
1 parent 992f1cf commit 8280819

6 files changed

Lines changed: 170 additions & 12 deletions

File tree

‎css3-transforms/Overview.html‎

Lines changed: 62 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -112,15 +112,15 @@
112112

113113
<h1>CSS transforms</h1>
114114

115-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 January
115+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 January
116116
2012</h2>
117117

118118
<dl>
119119
<dt>This version:
120120

121121
<dd> <a
122-
href="http://www.w3.org/TR/2012/ED-css3-2d-transforms-20120126/">http://dev.w3.org/csswg/css3-2d-transforms/</a>
123-
<!--http://www.w3.org/TR/2012/WD-css3-2d-transforms-20120126-->
122+
href="http://www.w3.org/TR/2012/ED-css3-2d-transforms-20120127/">http://dev.w3.org/csswg/css3-2d-transforms/</a>
123+
<!--http://www.w3.org/TR/2012/WD-css3-2d-transforms-20120127-->
124124

125125
<dt>Latest version:
126126

@@ -318,13 +318,16 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
318318

319319
<li><a href="#changes"><span class=secno>17. </span>Changes</a>
320320
<ul class=toc>
321-
<li><a href="#changes_on_January_26_2012"><span class=secno>17.1.
321+
<li><a href="#changes_on_January_27_2012"><span class=secno>17.1.
322+
</span> Changes by Simon Fraser on January 27 2012 </a>
323+
324+
<li><a href="#changes_on_January_26_2012"><span class=secno>17.2.
322325
</span> Changes by Simon Fraser on January 26 2012 </a>
323326

324-
<li><a href="#changes_on_January_25_2012"><span class=secno>17.2.
327+
<li><a href="#changes_on_January_25_2012"><span class=secno>17.3.
325328
</span> Changes by Simon Fraser on January 25 2012 </a>
326329

327-
<li><a href="#changes_from_January_24_2012"><span class=secno>17.3.
330+
<li><a href="#changes_from_January_24_2012"><span class=secno>17.4.
328331
</span> Changes from January 24<sup>th</sup> 2012 version </a>
329332
</ul>
330333

@@ -546,12 +549,53 @@ <h3 id=transform-3d-rendering><span class=secno>5.1. </span>3D Transform
546549
that element to render in front of elements with no translation in Z.
547550

548551
<div class=example>
552+
<p>This example shows the effect of three-dimensional transform applied to
553+
an element.</p>
554+
555+
<pre>
556+
div { height: 150px; width: 150px; }
557+
.container { border: 1px solid black; }
558+
.transformed { transform: rotateY(50deg); }
559+
</pre>
560+
549561
<pre>
562+
&lt;div class="container"&gt;
563+
&lt;div class="transformed"&gt;&lt;/div&gt;
564+
&lt;/div&gt;
550565
</pre>
551566

552-
<p>Insert example of simple 3d transform.</p>
567+
<p>The transform is a 50&deg; rotation about the vertical Y axis. Note how
568+
this makes the gray box appear narrower, but not three-dimensional.</p>
553569

554-
<div class=figure></div>
570+
<div class=figure> <img alt="Div with a rotateY transform." height=190
571+
src="examples/simple-3d-example.png" width=210></div>
572+
</div>
573+
574+
<div class=example>
575+
<p>This example shows how perspective can be used to cause
576+
three-dimensional transforms to appear more realistic.</p>
577+
578+
<pre>
579+
div { height: 150px; width: 150px; }
580+
.container { perspective: 500px; border: 1px solid black; }
581+
.transformed { transform: rotateY(50deg); }
582+
</pre>
583+
584+
<pre>
585+
&lt;div class="container"&gt;
586+
&lt;div class="transformed"&gt;&lt;/div&gt;
587+
&lt;/div&gt;
588+
</pre>
589+
590+
<p>The inner element has the same transform as before, but its rendering
591+
is now influenced by the perspective property on its parent element.
592+
Perspective causes vertices that have positive Z coordinates (closer to
593+
the viewer) to be scaled up in X and Y, and those futher away (negative Z
594+
coordinates) to be scaled down.</p>
595+
596+
<div class=figure> <img
597+
alt="Div with a rotateY transform, and perspective on its container"
598+
height=190 src="examples/simple-perspective-example.png" width=210></div>
555599
</div>
556600

557601
<p> An element with a three-dimensional transform that is contained in a
@@ -1924,7 +1968,14 @@ <h3 id=cssmatrix-interface><span class=secno>16.1. </span> CSSMatrix</h3>
19241968

19251969
<h2 id=changes><span class=secno>17. </span>Changes</h2>
19261970

1927-
<h3 id="changes_on_January_26_2012"><span class=secno>17.1. </span> Changes
1971+
<h3 id="changes_on_January_27_2012"><span class=secno>17.1. </span> Changes
1972+
by Simon Fraser on January 27 2012</h3>
1973+
1974+
<ul>
1975+
<li>Added two simple 3D examples.
1976+
</ul>
1977+
1978+
<h3 id="changes_on_January_26_2012"><span class=secno>17.2. </span> Changes
19281979
by Simon Fraser on January 26 2012</h3>
19291980

19301981
<ul>
@@ -1936,7 +1987,7 @@ <h3 id="changes_on_January_26_2012"><span class=secno>17.1. </span> Changes
19361987
normative text describing how 3D is rendered
19371988
</ul>
19381989

1939-
<h3 id="changes_on_January_25_2012"><span class=secno>17.2. </span> Changes
1990+
<h3 id="changes_on_January_25_2012"><span class=secno>17.3. </span> Changes
19401991
by Simon Fraser on January 25 2012</h3>
19411992

19421993
<ul>
@@ -1953,7 +2004,7 @@ <h3 id="changes_on_January_25_2012"><span class=secno>17.2. </span> Changes
19532004
15598</a>, adding a note about unitless 0 in angles.
19542005
</ul>
19552006

1956-
<h3 id="changes_from_January_24_2012"><span class=secno>17.3. </span>
2007+
<h3 id="changes_from_January_24_2012"><span class=secno>17.4. </span>
19572008
Changes from <a
19582009
href="http://www.w3.org/TR/2012/ED-css3-2d-transforms-20110124/">January
19592010
24<sup>th</sup> 2012</a> version</h3>

‎css3-transforms/Transforms.src.html‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -354,14 +354,49 @@ <h3 id="transform-3d-rendering">3D Transform Rendering</h3>
354354
</p>
355355

356356
<div class="example">
357+
<p>This example shows the effect of three-dimensional transform applied to an element.
358+
</p>
357359
<pre>
360+
div { height: 150px; width: 150px; }
361+
.container { border: 1px solid black; }
362+
.transformed { transform: rotateY(50deg); }
358363
</pre>
359-
<p>Insert example of simple 3d transform.
364+
<pre>
365+
&lt;div class="container"&gt;
366+
&lt;div class="transformed"&gt;&lt;/div&gt;
367+
&lt;/div&gt;
368+
</pre>
369+
<p>The transform is a 50&deg; rotation about the vertical Y axis. Note how this makes the gray box appear
370+
narrower, but not three-dimensional.
360371
</p>
361372
<div class="figure">
373+
<img src="examples/simple-3d-example.png" width="210" height="190" alt="Div with a rotateY transform.">
362374
</div>
363375
</div>
364376

377+
<div class="example">
378+
<p>This example shows how perspective can be used to cause three-dimensional transforms to appear more realistic.
379+
</p>
380+
<pre>
381+
div { height: 150px; width: 150px; }
382+
.container { perspective: 500px; border: 1px solid black; }
383+
.transformed { transform: rotateY(50deg); }
384+
</pre>
385+
<pre>
386+
&lt;div class="container"&gt;
387+
&lt;div class="transformed"&gt;&lt;/div&gt;
388+
&lt;/div&gt;
389+
</pre>
390+
<p>The inner element has the same transform as before, but its rendering is now influenced by the perspective
391+
property on its parent element. Perspective causes vertices that have positive Z coordinates (closer to the viewer)
392+
to be scaled up in X and Y, and those futher away (negative Z coordinates) to be scaled down.
393+
</p>
394+
<div class="figure">
395+
<img src="examples/simple-perspective-example.png" width="210" height="190" alt="Div with a rotateY transform,
396+
and perspective on its container">
397+
</div>
398+
</div>
399+
365400
<p>
366401
An element with a three-dimensional transform that is contained in a
367402
<span class="term">3D rendering context</span> can visibly interact with other elements
@@ -1875,6 +1910,13 @@ <h3 id="cssmatrix-interface">
18751910

18761911
<h2 id="changes">Changes</h2>
18771912

1913+
<h3 id="changes_on_January_27_2012">
1914+
Changes by Simon Fraser on January 27 2012
1915+
<ul>
1916+
<li>Added two simple 3D examples.</li>
1917+
</ul>
1918+
</h3>
1919+
18781920
<h3 id="changes_on_January_26_2012">
18791921
Changes by Simon Fraser on January 26 2012
18801922
<ul>

‎css3-transforms/examples/simple-3d-example.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
3+
<html
4+
<head>
5+
<title>Simple 3D example</title>
6+
<style>
7+
div {
8+
height: 150px; width: 150px;
9+
}
10+
.container {
11+
border: 1px solid black;
12+
margin: 20px;
13+
background-color: rgba(0, 0, 0, 0.1);
14+
}
15+
.transformed {
16+
-webkit-transform: rotateY(50deg);
17+
-moz-transform: rotateY(50deg);
18+
-ms-transform: rotateY(50deg);
19+
-o-transform: rotateY(50deg);
20+
transform: rotateY(50deg);
21+
background-color: blue;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<div class="container">
27+
<div class="transformed"></div>
28+
</div>
29+
</body>
30+
</html>

‎css3-transforms/examples/simple-3d-example.png‎

7.36 KB
Loading

‎css3-transforms/examples/simple-perspective-example.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
3+
<html
4+
<head>
5+
<title>Simple 3D example</title>
6+
<style>
7+
div {
8+
height: 150px; width: 150px;
9+
}
10+
.container {
11+
border: 1px solid black;
12+
margin: 20px;
13+
background-color: rgba(0, 0, 0, 0.1);
14+
-webkit-perspective: 500px;
15+
-moz-perspective: 500px;
16+
-ms-perspective: 500px;
17+
-o-perspective: 500px;
18+
perspective: 500px;
19+
}
20+
.transformed {
21+
-webkit-transform: rotateY(50deg);
22+
-moz-transform: rotateY(50deg);
23+
-ms-transform: rotateY(50deg);
24+
-o-transform: rotateY(50deg);
25+
transform: rotateY(50deg);
26+
background-color: blue;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div class="container">
32+
<div class="transformed"></div>
33+
</div>
34+
</body>
35+
</html>

‎css3-transforms/examples/simple-perspective-example.png‎

8.16 KB
Loading

0 commit comments

Comments
 (0)