| <html> |
| <head> |
| <title>Point mapping through 3D transform hierarchies</title> |
| <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8"></script> |
| <script type="text/javascript" charset="utf-8"> |
| |
| function test() |
| { |
| // In non-test mode, show the mouse coords for testing |
| if (!window.testRunner) |
| document.body.addEventListener('mousemove', mousemoved, false); |
| |
| dispatchEvent(158, 83, 'card', 2, 2); |
| dispatchEvent(309, 112, 'card', 198, 2); |
| dispatchEvent(158, 338, 'card', 2, 198); |
| dispatchEvent(309, 308, 'card', 198, 198); |
| } |
| </script> |
| <style type="text/css" media="screen"> |
| #scene { |
| position: absolute; |
| border: 1px solid black; |
| height: 400px; |
| width: 400px; |
| -webkit-perspective: 600; |
| -webkit-transform-style: preserve-3d; |
| } |
| |
| #container { |
| position: absolute; |
| height: 300px; |
| width: 300px; |
| margin: 50px; |
| border: 1px solid blue; |
| -webkit-transform-style: preserve-3d; |
| } |
| |
| #card { |
| position: absolute; |
| top: 50px; |
| left: 50px; |
| height: 200px; |
| width: 200px; |
| background-color: #81AA8A; |
| -webkit-transform-origin: right top; |
| transform: rotateY(45deg); |
| } |
| |
| #card:hover { |
| background-color: orange; |
| } |
| |
| #results { |
| position: absolute; |
| left: 30px; |
| top: 500px; |
| } |
| |
| #mousepos { |
| position: absolute; |
| left: 430px; |
| top: 400px; |
| color: gray; |
| font-size: smaller; |
| } |
| </style> |
| </head> |
| <body onclick="clicked(event)"> |
| |
| <div id="results"></div> |
| |
| <div id="scene"> |
| <div id="container"> |
| <div id="card"></div> |
| </div> |
| </div> |
| |
| <div id="mousepos"></div> |
| |
| </body> |
| </html> |
