OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <title>Point mapping through 3D transforms</title> | 3 <title>Point mapping through 3D transforms</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 | 5 |
6 <script type="text/javascript" charset="utf-8"> | 6 <script type="text/javascript" charset="utf-8"> |
7 | 7 |
8 function test() | 8 function test() |
9 { | 9 { |
10 dispatchEvent(44, 44, 'box1', 2, 2); | 10 dispatchEvent(44, 44, 'box1', 2, 2); |
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
75 | 75 |
76 .transformed { | 76 .transformed { |
77 position: relative; | 77 position: relative; |
78 height: 100px; | 78 height: 100px; |
79 width: 100px; | 79 width: 100px; |
80 padding: 20px; | 80 padding: 20px; |
81 margin: 20px; | 81 margin: 20px; |
82 border: 1px solid black; | 82 border: 1px solid black; |
83 background-color: #AAA; | 83 background-color: #AAA; |
84 -webkit-box-sizing: border-box; | 84 -webkit-box-sizing: border-box; |
85 -webkit-transform: translateZ(100px) rotateY(-40deg); | 85 transform: translateZ(100px) rotateY(-40deg); |
86 } | 86 } |
87 | 87 |
88 .layer { | 88 .layer { |
89 padding: 20px; | 89 padding: 20px; |
90 background-color: #C0D69E; | 90 background-color: #C0D69E; |
91 } | 91 } |
92 | 92 |
93 .inner { | 93 .inner { |
94 background-color: blue; | 94 background-color: blue; |
95 } | 95 } |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
150 </div> | 150 </div> |
151 </div> | 151 </div> |
152 </div> | 152 </div> |
153 </div> | 153 </div> |
154 </div> | 154 </div> |
155 | 155 |
156 <div id="mousepos"></div> | 156 <div id="mousepos"></div> |
157 | 157 |
158 </body> | 158 </body> |
159 </html> | 159 </html> |
OLD | NEW |