OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <title>Hit testing on preserves-3d element</title> | 3 <title>Hit testing on preserves-3d element</title> |
4 <style type="text/css" media="screen"> | 4 <style type="text/css" media="screen"> |
5 .container { | 5 .container { |
6 -webkit-perspective: 500px; | 6 -webkit-perspective: 500px; |
7 } | 7 } |
8 .set { | 8 .set { |
9 position: absolute; | 9 position: absolute; |
10 top: 8px; | 10 top: 8px; |
11 } | 11 } |
12 .box { | 12 .box { |
13 height: 100px; | 13 height: 100px; |
14 width: 100px; | 14 width: 100px; |
15 } | 15 } |
16 | 16 |
17 .should-be-visible { background-color: green !important; } | 17 .should-be-visible { background-color: green !important; } |
18 .composited { | 18 .composited { |
19 -webkit-transform: rotate3d(0, 0, 1, 45deg); | 19 transform: rotate3d(0, 0, 1, 45deg); |
20 } | 20 } |
21 | 21 |
22 .intermediate { | 22 .intermediate { |
23 -webkit-transform: rotate3d(0, 0, 1, -45deg); | 23 transform: rotate3d(0, 0, 1, -45deg); |
24 -webkit-transform-style: preserve-3d; | 24 -webkit-transform-style: preserve-3d; |
25 background-color: red; | 25 background-color: red; |
26 } | 26 } |
27 | 27 |
28 #results { | 28 #results { |
29 position: absolute; | 29 position: absolute; |
30 top: 200; | 30 top: 200; |
31 } | 31 } |
32 </style> | 32 </style> |
33 <script type="text/javascript" charset="utf-8"> | 33 <script type="text/javascript" charset="utf-8"> |
(...skipping 17 matching lines...) Expand all Loading... |
51 <div class="container"> | 51 <div class="container"> |
52 <div class="intermediate"> | 52 <div class="intermediate"> |
53 <div id="target" class="composited box should-be-visible"></div> | 53 <div id="target" class="composited box should-be-visible"></div> |
54 </div> | 54 </div> |
55 </div> | 55 </div> |
56 </div> | 56 </div> |
57 | 57 |
58 <div id="results"></div> | 58 <div id="results"></div> |
59 </body> | 59 </body> |
60 </html> | 60 </html> |
OLD | NEW |