OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <title>Point mapping through 3D transform hierarchies</title> | 3 <title>Point mapping through 3D transform hierarchies</title> |
4 <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8">
</script> | 4 <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8">
</script> |
5 <script type="text/javascript" charset="utf-8"> | 5 <script type="text/javascript" charset="utf-8"> |
6 | 6 |
7 function test() | 7 function test() |
8 { | 8 { |
9 // In non-test mode, show the mouse coords for testing | 9 // In non-test mode, show the mouse coords for testing |
10 if (!window.testRunner) | 10 if (!window.testRunner) |
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
99 .transformed-3d { | 99 .transformed-3d { |
100 position: relative; | 100 position: relative; |
101 height: 100px; | 101 height: 100px; |
102 width: 100px; | 102 width: 100px; |
103 padding: 20px; | 103 padding: 20px; |
104 margin: 20px; | 104 margin: 20px; |
105 border: 1px solid black; | 105 border: 1px solid black; |
106 background-color: #81AA8A; | 106 background-color: #81AA8A; |
107 -webkit-transform-style: preserve-3d; | 107 -webkit-transform-style: preserve-3d; |
108 -webkit-box-sizing: border-box; | 108 -webkit-box-sizing: border-box; |
109 -webkit-transform: rotateY(-30deg); | 109 transform: rotateY(-30deg); |
110 } | 110 } |
111 | 111 |
112 .transformed-flat { | 112 .transformed-flat { |
113 position: relative; | 113 position: relative; |
114 height: 100px; | 114 height: 100px; |
115 width: 100px; | 115 width: 100px; |
116 padding: 20px; | 116 padding: 20px; |
117 margin: 20px; | 117 margin: 20px; |
118 border: 1px solid black; | 118 border: 1px solid black; |
119 background-color: #AA7994; | 119 background-color: #AA7994; |
120 -webkit-transform-style: flat; | 120 -webkit-transform-style: flat; |
121 -webkit-box-sizing: border-box; | 121 -webkit-box-sizing: border-box; |
122 -webkit-transform: rotateY(-30deg); | 122 transform: rotateY(-30deg); |
123 } | 123 } |
124 | 124 |
125 .inner { | 125 .inner { |
126 background-color: blue; | 126 background-color: blue; |
127 height: 90px; | 127 height: 90px; |
128 width: 90px; | 128 width: 90px; |
129 } | 129 } |
130 | 130 |
131 #results { | 131 #results { |
132 position: absolute; | 132 position: absolute; |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
171 <div class="transformed-3d box" id="box7"> | 171 <div class="transformed-3d box" id="box7"> |
172 <div class="inner box" style="position: relative" id="box8"> | 172 <div class="inner box" style="position: relative" id="box8"> |
173 </div> | 173 </div> |
174 </div> | 174 </div> |
175 </div> | 175 </div> |
176 </div> | 176 </div> |
177 <div class="test four"> | 177 <div class="test four"> |
178 <!-- Nested transformed, preserve-3d divs in perpsective --> | 178 <!-- Nested transformed, preserve-3d divs in perpsective --> |
179 <div class="container box" id="box9"> | 179 <div class="container box" id="box9"> |
180 <div class="transformed-3d box" id="box10"> | 180 <div class="transformed-3d box" id="box10"> |
181 <div class="transformed-3d box" style="-webkit-transform: translateZ(20px)
rotateY(50deg)" id="box11"> | 181 <div class="transformed-3d box" style="transform: translateZ(20px) rotateY
(50deg)" id="box11"> |
182 </div> | 182 </div> |
183 </div> | 183 </div> |
184 </div> | 184 </div> |
185 </div> | 185 </div> |
186 <div class="test five"> | 186 <div class="test five"> |
187 <!-- Transformed, preserve-3d div in perpsective with non-layer child --> | 187 <!-- Transformed, preserve-3d div in perpsective with non-layer child --> |
188 <div class="container box" id="box12"> | 188 <div class="container box" id="box12"> |
189 <div class="transformed-3d box" id="box13"> | 189 <div class="transformed-3d box" id="box13"> |
190 <div class="transformed-3d box" style="-webkit-transform: translateZ(10px)
rotateY(50deg)" id="box14"> | 190 <div class="transformed-3d box" style="transform: translateZ(10px) rotateY
(50deg)" id="box14"> |
191 <div class="inner box" id="box15"> | 191 <div class="inner box" id="box15"> |
192 </div> | 192 </div> |
193 </div> | 193 </div> |
194 </div> | 194 </div> |
195 </div> | 195 </div> |
196 </div> | 196 </div> |
197 <div class="test six"> | 197 <div class="test six"> |
198 <!-- Flatten in the middle of 3d --> | 198 <!-- Flatten in the middle of 3d --> |
199 <div class="container box" id="box16"> | 199 <div class="container box" id="box16"> |
200 <div class="transformed-3d box" id="box17"> | 200 <div class="transformed-3d box" id="box17"> |
201 <div class="transformed-3d box" style="-webkit-transform: translateZ(10px)
rotateY(20deg)" id="box18"> | 201 <div class="transformed-3d box" style="transform: translateZ(10px) rotateY
(20deg)" id="box18"> |
202 <div class="transformed-flat box" style="-webkit-transform-style: flat;
-webkit-transform: rotateX(-20deg)" id="box19"> | 202 <div class="transformed-flat box" style="-webkit-transform-style: flat;
transform: rotateX(-20deg)" id="box19"> |
203 <div class="inner box" id="box20"> | 203 <div class="inner box" id="box20"> |
204 </div> | 204 </div> |
205 </div> | 205 </div> |
206 </div> | 206 </div> |
207 </div> | 207 </div> |
208 </div> | 208 </div> |
209 </div> | 209 </div> |
210 | 210 |
211 <div id="mousepos"></div> | 211 <div id="mousepos"></div> |
212 | 212 |
213 </body> | 213 </body> |
214 </html> | 214 </html> |
OLD | NEW |