OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 | 2 |
3 <html> | 3 <html> |
4 <head> | 4 <head> |
5 <style> | 5 <style> |
6 .container { | 6 .container { |
7 position: relative; | 7 position: relative; |
8 } | 8 } |
9 .box { | 9 .box { |
10 position: absolute; | 10 position: absolute; |
11 height: 150px; | 11 height: 150px; |
12 width: 100px; | 12 width: 100px; |
13 background-color: gray; | 13 background-color: gray; |
14 } | 14 } |
15 .green { | 15 .green { |
16 height: 100px; | 16 height: 100px; |
17 background-color: green; | 17 background-color: green; |
18 } | 18 } |
19 .box-container { | 19 .box-container { |
20 position: absolute; | 20 position: absolute; |
21 -webkit-perspective: 200; | 21 -webkit-perspective: 200; |
22 -webkit-perspective-origin: 50px 50px; | 22 -webkit-perspective-origin: 50px 50px; |
23 } | 23 } |
24 .rotate-3d-start { | 24 .rotate-3d-start { |
25 -webkit-transform: scale(0.5) rotateX(45deg) rotateY(45deg); | 25 transform: scale(0.5) rotateX(45deg) rotateY(45deg); |
26 -webkit-transform-origin: 50px 50px; | 26 -webkit-transform-origin: 50px 50px; |
27 -webkit-transform-style: preserve-3d; | 27 -webkit-transform-style: preserve-3d; |
28 } | 28 } |
29 .rotate-3d-end { | 29 .rotate-3d-end { |
30 -webkit-transform: scale(1.0) rotateX(45deg) rotateY(45deg); | 30 transform: scale(1.0) rotateX(45deg) rotateY(45deg); |
31 } | 31 } |
32 .top { | 32 .top { |
33 top: 0px; | 33 top: 0px; |
34 } | 34 } |
35 .bottom { | 35 .bottom { |
36 top: 150px; | 36 top: 150px; |
37 } | 37 } |
38 .left { | 38 .left { |
39 left: 0px; | 39 left: 0px; |
40 } | 40 } |
(...skipping 13 matching lines...) Expand all Loading... |
54 width: 98px; | 54 width: 98px; |
55 height: 88px; | 55 height: 88px; |
56 text-align: center; | 56 text-align: center; |
57 padding-top: 10px; | 57 padding-top: 10px; |
58 background: rgba(0, 255, 0, 0.8); | 58 background: rgba(0, 255, 0, 0.8); |
59 font-weight: bold; | 59 font-weight: bold; |
60 border: 1px solid green; | 60 border: 1px solid green; |
61 -webkit-transform-origin: 50% 50%; | 61 -webkit-transform-origin: 50% 50%; |
62 } | 62 } |
63 .side-1 { | 63 .side-1 { |
64 -webkit-transform: translateZ(50px); | 64 transform: translateZ(50px); |
65 } | 65 } |
66 .side-2 { | 66 .side-2 { |
67 -webkit-transform: rotateY(90deg) translateZ(50px); | 67 transform: rotateY(90deg) translateZ(50px); |
68 } | 68 } |
69 .side-3 { | 69 .side-3 { |
70 -webkit-transform: rotateY(180deg) translateZ(50px); | 70 transform: rotateY(180deg) translateZ(50px); |
71 } | 71 } |
72 .side-4 { | 72 .side-4 { |
73 -webkit-transform: rotateY(270deg) translateZ(50px); | 73 transform: rotateY(270deg) translateZ(50px); |
74 } | 74 } |
75 .side-5 { | 75 .side-5 { |
76 -webkit-transform: rotateX(90deg) translateZ(50px); | 76 transform: rotateX(90deg) translateZ(50px); |
77 } | 77 } |
78 .side-6 { | 78 .side-6 { |
79 -webkit-transform: rotateX(-90deg) translateZ(50px); | 79 transform: rotateX(-90deg) translateZ(50px); |
80 } | 80 } |
81 </style> | 81 </style> |
82 <script> | 82 <script> |
83 if (window.testRunner) | 83 if (window.testRunner) |
84 testRunner.dumpAsText(); | 84 testRunner.dumpAsText(); |
85 | 85 |
86 function runTest() | 86 function runTest() |
87 { | 87 { |
88 var layerTrees = ""; | 88 var layerTrees = ""; |
89 | 89 |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
125 </div> | 125 </div> |
126 </div> | 126 </div> |
127 <div class="box top left"></div> | 127 <div class="box top left"></div> |
128 <div class="box top right"></div> | 128 <div class="box top right"></div> |
129 <div class="box bottom left"></div> | 129 <div class="box bottom left"></div> |
130 <div class="box bottom right"></div> | 130 <div class="box bottom right"></div> |
131 </div> | 131 </div> |
132 <pre id="layers">Layer tree goes here in DRT</pre> | 132 <pre id="layers">Layer tree goes here in DRT</pre> |
133 </body> | 133 </body> |
134 </html> | 134 </html> |
OLD | NEW |