FFFF 2012-01-29 simon.fraser@apple.com · w3c/csswg-drafts@8c524af · GitHub
Skip to content

Commit 8c524af

Browse files
smfrsmfr
committed
2012-01-29 simon.fraser@apple.com
 Add more examples, with source files, to the 3D Rendering Context section.
1 parent 163bac1 commit 8c524af

9 files changed

Lines changed: 301 additions & 14 deletions

‎css3-transforms/ChangeLog‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
2012-01-29 simon.fraser@apple.com
2+
Add more examples, with source files, to the 3D Rendering Context section.
3+
14
2012-01-29 simon.fraser@apple.com
25
Minor edits in various places.
36
Made the issue-markers float:left and clear:both, so they don't overlap.

‎css3-transforms/Overview.html‎

Lines changed: 75 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -552,9 +552,11 @@ <h3 id=transform-3d-rendering><span class=secno>5.1. </span>3D Transform
552552
an element.</p>
553553

554554
<pre>
555+
&lt;style&gt;
555556
div { height: 150px; width: 150px; }
556557
.container { border: 1px solid black; }
557558
.transformed { transform: rotateY(50deg); }
559+
&lt;/style&gt;
558560
</pre>
559561

560562
<pre>
@@ -575,9 +577,11 @@ <h3 id=transform-3d-rendering><span class=secno>5.1. </span>3D Transform
575577
three-dimensional transforms to appear more realistic.</p>
576578

577579
<pre>
580+
&lt;style&gt;
578581
div { height: 150px; width: 150px; }
579582
.container { perspective: 500px; border: 1px solid black; }
580583
.transformed { transform: rotateY(50deg); }
584+
&lt;/style&gt;
581585
</pre>
582586

583587
<pre>
@@ -673,29 +677,93 @@ <h3 id=transform-3d-rendering><span class=secno>5.1. </span>3D Transform
673677

674678
<div class=example>
675679
<pre>
676-
</pre>
680+
&lt;style&gt;
681+
div { height: 150px; width: 150px; }
682+
.container { perspective: 500px; border: 1px solid black; }
683+
.transformed { transform: rotateY(50deg); background-color: blue; }
684+
.child { transform-origin: top left; transform: rotateX(40deg); background-color: lime; }
685+
&lt;/style&gt;
677686

678-
<p>Example of simple 3D rendering context</p>
687+
&lt;div class="container"&gt;
688+
&lt;div class="transformed"&gt;
689+
&lt;div class="child"&gt;&lt;/div&gt;
690+
&lt;/div&gt;
691+
&lt;/div&gt;
692+
</pre>
679693

680-
<div class=figure></div>
694+
<p>This exmaple shows how nested 3D transforms are rendered in the absence
695+
of <code>transform-style: preserve-3d</code>. The blue div is transformed
696+
as in the previous example, with its rendering influenced by the
697+
perspective on its parent element. The lime element also has a 3D
698+
transform, which is a rotation about the X axis (anchored at the top, by
699+
virtue of the transform-origin). However, the lime element is being
700+
rendered into the plane of its parent because it is not a member of a 3D
701+
rendering context; the parent is "flattening".</p>
702+
703+
<div class=figure> <img alt="Nested 3D transforms, with flattening"
704+
height=200 src="examples/3d-rendering-context-flat.png" width=240></div>
681705
</div>
682706

683707
<div class=example>
684708
<pre>
709+
&lt;style&gt;
710+
div { height: 150px; width: 150px; }
711+
.container { perspective: 500px; border: 1px solid black; }
712+
.transformed { <b>transform-style: preserve-3d</b>; transform: rotateY(50deg); background-color: blue; }
713+
.child { transform-origin: top left; transform: rotateX(40deg); background-color: lime; }
714+
&lt;/style&gt;
685715
</pre>
686716

687-
<p>Example of deeper 3D rendering context</p>
717+
<p>This example is identical to the previous example, with the addition of
718+
<code>transform-style: preserve-3d</code> on the blue element. The blue
719+
element now establishes a 3D rendering context, of which the lime element
720+
is a member. Now both blue and lime elements share a common
721+
three-dimensional space, so the lime element renders as tilting out from
722+
its parent, influenced by the perspective on the container.</p>
688723

689-
<div class=figure></div>
724+
<div class=figure> <img alt="Nested 3D transforms, with preserve-3d."
725+
height=200 src="examples/3d-rendering-context-3d.png" width=240></div>
690726
</div>
691727

692728
<div class=example>
693729
<pre>
730+
&lt;style&gt;
731+
.container {
732+
background-color: rgba(0, 0, 0, 0.3);
733+
transform-style: preserve-3d;
734+
perspective: 500px;
735+
}
736+
.container > div {
737+
position: absolute;
738+
left: 0;
739+
}
740+
.container > :first-child {
741+
transform: rotateY(45deg);
742+
background-color: orange;
743+
top: 10px;
744+
height: 135px;
745+
}
746+
.container > :last-child {
747+
transform: translateZ(40px);
748+
background-color: rgba(0, 0, 255, 0.75);
749+
top: 50px;
750+
height: 100px;
751+
}
752+
&lt;/style&gt;
753+
754+
&lt;div class="container"&gt;
755+
&lt;div&gt;&lt;/div&gt;
756+
&lt;div&gt;&lt;/div&gt;
757+
&lt;/div&gt;
694758
</pre>
695759

696-
<p>Example of flattening inside 3D rendering context</p>
760+
<p> This example shows show elements in a 3D rendering context can
761+
intersect. The container element establishes a 3D rendering context for
762+
itself and its two children. The children intersect with eachother, and
763+
the orange element also intersects with the container.</p>
697764

698-
<div class=figure></div>
765+
<div class=figure> <img alt="Intersecting sibling elements." height=200
766+
src="examples/3d-intersection.png" width=200></div>
699767
</div>
700768
<!--
701769
<p>

‎css3-transforms/Transforms.src.html‎

Lines changed: 64 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -358,9 +358,11 @@ <h3 id="transform-3d-rendering">3D Transform Rendering</h3>
358358
<p>This example shows the effect of three-dimensional transform applied to an element.
359359
</p>
360360
<pre>
361+
&lt;style&gt;
361362
div { height: 150px; width: 150px; }
362363
.container { border: 1px solid black; }
363364
.transformed { transform: rotateY(50deg); }
365+
&lt;/style&gt;
364366
</pre>
365367
<pre>
366368
&lt;div class="container"&gt;
@@ -379,9 +381,11 @@ <h3 id="transform-3d-rendering">3D Transform Rendering</h3>
379381
<p>This example shows how perspective can be used to cause three-dimensional transforms to appear more realistic.
380382
</p>
381383
<pre>
384+
&lt;style&gt;
382385
div { height: 150px; width: 150px; }
383386
.container { perspective: 500px; border: 1px solid black; }
384387
.transformed { transform: rotateY(50deg); }
388+
&lt;/style&gt;
385389
</pre>
386390
<pre>
387391
&lt;div class="container"&gt;
@@ -468,30 +472,83 @@ <h3 id="transform-3d-rendering">3D Transform Rendering</h3>
468472

469473
<div class="example">
470474
<pre>
475+
&lt;style&gt;
476+
div { height: 150px; width: 150px; }
477+
.container { perspective: 500px; border: 1px solid black; }
478+
.transformed { transform: rotateY(50deg); background-color: blue; }
479+
.child { transform-origin: top left; transform: rotateX(40deg); background-color: lime; }
480+
&lt;/style&gt;
481+
482+
&lt;div class="container"&gt;
483+
&lt;div class="transformed"&gt;
484+
&lt;div class="child"&gt;&lt;/div&gt;
485+
&lt;/div&gt;
486+
&lt;/div&gt;
471487
</pre>
472-
<p>Example of simple 3D rendering context
488+
<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".
473489
</p>
474490
<div class="figure">
491+
<img src="examples/3d-rendering-context-flat.png" width="240" height="200" alt="Nested 3D transforms, with flattening">
475492
</div>
476493
</div>
477494

478495
<div class="example">
479496
<pre>
497+
&lt;style&gt;
498+
div { height: 150px; width: 150px; }
499+
.container { perspective: 500px; border: 1px solid black; }
500+
.transformed { <b>transform-style: preserve-3d</b>; transform: rotateY(50deg); background-color: blue; }
501+
.child { transform-origin: top left; transform: rotateX(40deg); background-color: lime; }
502+
&lt;/style&gt;
480503
</pre>
481-
<p>Example of deeper 3D rendering context
504+
<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.
482505
</p>
483506
<div class="figure">
507+
<img src="examples/3d-rendering-context-3d.png" width="240" height="200" alt="Nested 3D transforms, with preserve-3d.">
484508
</div>
485509
</div>
486510

487-
<div class="example">
511+
<div class="example">
488512
<pre>
513+
&lt;style&gt;
514+
.container {
515+
background-color: rgba(0, 0, 0, 0.3);
516+
transform-style: preserve-3d;
517+
perspective: 500px;
518+
}
519+
.container > div {
520+
position: absolute;
521+
left: 0;
522+
}
523+
.container > :first-child {
524+
transform: rotateY(45deg);
525+
background-color: orange;
526+
top: 10px;
527+
height: 135px;
528+
}
529+
.container > :last-child {
530+
transform: translateZ(40px);
531+
background-color: rgba(0, 0, 255, 0.75);
532+
top: 50px;
533+
height: 100px;
534+
}
535+
&lt;/style&gt;
536+
537+
&lt;div class="container"&gt;
538+
&lt;div&gt;&lt;/div&gt;
539+
&lt;div&gt;&lt;/div&gt;
540+
&lt;/div&gt;
489541
</pre>
490-
<p>Example of flattening inside 3D rendering context
491-
</p>
492-
<div class="figure">
542+
<p>
543+
This example shows show elements in a 3D rendering context can intersect. The container element establishes
544+
a 3D rendering context for itself and its two children. The children intersect with eachother, and
545+
the orange element also intersects with the container.
546+
</p>
547+
<div class="figure">
548+
<img src="examples/3d-intersection.png" width="200" height="200" alt="Intersecting sibling elements.">
549+
</div>
493550
</div>
494-
</div>
551+
495552

496553

497554
<!--

‎css3-transforms/examples/3d-intersection.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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.3);
14+
-webkit-perspective: 500px;
15+
-moz-perspective: 500px;
16+
-ms-perspective: 500px;
17+
-o-perspective: 500px;
18+
perspective: 500px;
19+
20+
-webkit-transform-style: preserve-3d;
21+
-moz-transform-style: preserve-3d;
22+
-ms-transform-style: preserve-3d;
23+
-o-transform-style: preserve-3d;
24+
transform-style: preserve-3d;
25+
}
26+
27+
.container > div {
28+
position: absolute;
29+
left: 0;
30+
}
31+
.container > :first-child {
32+
-webkit-transform: rotateY(45deg);
33+
-moz-transform: rotateY(45deg);
34+
-ms-transform: rotateY(45deg);
35+
-o-transform: rotateY(45deg);
36+
transform: rotateY(45deg);
37+
background-color: orange;
38+
top: 10px;
39+
height: 135px;
40+
}
41+
42+
.container > :last-child {
43+
-webkit-transform: translateZ(40px);
44+
-moz-transform: translateZ(40px);
45+
-ms-transform: translateZ(40px);
46+
-o-transform: translateZ(40px);
47+
transform: translateZ(40px);
48+
background-color: rgba(0, 0, 255, 0.75);
49+
top: 50px;
50+
height: 100px;
51+
}
52+
</style>
53+
</head>
54+
<body>
55+
<div class="container">
56+
<div></div>
57+
<div></div>
58+
</div>
59+
</body>
60+
</html>

‎css3-transforms/examples/3d-intersection.png‎

8.37 KB
Loading

‎css3-transforms/examples/3d-rendering-context-3d.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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+
27+
-webkit-transform-style: preserve-3d;
28+
-moz-transform-style: preserve-3d;
29+
-ms-transform-style: preserve-3d;
30+
-o-transform-style: preserve-3d;
31+
transform-style: preserve-3d;
32+
33+
background-color: blue;
34+
}
35+
.child {
36+
-webkit-transform-origin: top left;
37+
-webkit-transform: rotateX( 8096 40deg);
38+
-moz-transform: rotateX(40deg);
39+
-ms-transform: rotateX(40deg);
40+
-o-transform: rotateX(40deg);
41+
transform: rotateX(40deg);
42+
background-color: lime;
43+
}
44+
</style>
45+
</head>
46+
<body>
47+
<div class="container">
48+
<div class="transformed">
49+
<div class="child"></div>
50+
</div>
51+
</div>
52+
</body>
53+
</html>

‎css3-transforms/examples/3d-rendering-context-3d.png‎

10.8 KB
Loading

0 commit comments

Comments
 (0)