| 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 |