| 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 25 matching lines...) Expand all Loading... |
| 36 } | 36 } |
| 37 | 37 |
| 38 #card { | 38 #card { |
| 39 position: absolute; | 39 position: absolute; |
| 40 top: 50px; | 40 top: 50px; |
| 41 left: 50px; | 41 left: 50px; |
| 42 height: 200px; | 42 height: 200px; |
| 43 width: 200px; | 43 width: 200px; |
| 44 background-color: #81AA8A; | 44 background-color: #81AA8A; |
| 45 -webkit-transform-origin: right top; | 45 -webkit-transform-origin: right top; |
| 46 -webkit-transform: rotateY(45deg); | 46 transform: rotateY(45deg); |
| 47 } | 47 } |
| 48 | 48 |
| 49 #card:hover { | 49 #card:hover { |
| 50 background-color: orange; | 50 background-color: orange; |
| 51 } | 51 } |
| 52 | 52 |
| 53 #results { | 53 #results { |
| 54 position: absolute; | 54 position: absolute; |
| 55 left: 30px; | 55 left: 30px; |
| 56 top: 500px; | 56 top: 500px; |
| (...skipping 15 matching lines...) Expand all Loading... |
| 72 <div id="scene"> | 72 <div id="scene"> |
| 73 <div id="container"> | 73 <div id="container"> |
| 74 <div id="card"></div> | 74 <div id="card"></div> |
| 75 </div> | 75 </div> |
| 76 </div> | 76 </div> |
| 77 | 77 |
| 78 <div id="mousepos"></div> | 78 <div id="mousepos"></div> |
| 79 | 79 |
| 80 </body> | 80 </body> |
| 81 </html> | 81 </html> |
| OLD | NEW |