| <html> |
| <head> |
| <title>Point mapping through deeply nested 3D transforms</title> |
| <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8"></script> |
| <script type="text/javascript" charset="utf-8"> |
| |
| function test() |
| { |
| // Scroll so that frame view offsets are non-zero |
| // window.scrollTo(20, 100); |
| |
| // document.getElementById('overflow').scrollLeft = 80; |
| // document.getElementById('overflow').scrollTop = 60; |
| |
| // In non-test mode, show the mouse coords for testing |
| if (!window.testRunner) |
| document.body.addEventListener('mousemove', mousemoved, false); |
| |
| dispatchEvent(45, 45, 'box1', 2, 2); |
| dispatchEvent(54, 44, 'box2', 1, 1); |
| dispatchEvent(104, 93, 'box3', 1, 1); |
| |
| dispatchEvent(175, 137, 'box4', 1, 1); |
| dispatchEvent(167, 528, 'box4', 1, 295); |
| |
| dispatchEvent(227, 197, 'box5', 1, 1); |
| |
| dispatchEvent(539, 569, 'box7', 295, 295); |
| |
| dispatchEvent(431, 441, 'box8', 85, 85); |
| } |
| </script> |
| <style type="text/css" media="screen"> |
| |
| body { |
| margin: 0; |
| border: 1px solid black; |
| cursor: crosshair; |
| } |
| |
| .test { |
| display: inline-block; |
| height: 400px; |
| width: 400px; |
| border: 1px solid black; |
| margin: 20px; |
| } |
| |
| .box { |
| height: 300px; |
| width: 300px; |
| -webkit-box-sizing: border-box; |
| background-color: #DDD; |
| border: 1px solid black; |
| } |
| |
| .box:hover { |
| outline: 3px solid orange; |
| } |
| |
| .container { |
| height: 340px; |
| width: 340px; |
| margin: 20px; |
| border: 1px solid black; |
| -webkit-box-sizing: border-box; |
| -webkit-perspective: 400; |
| } |
| |
| .transformed-3d { |
| height: 300px; |
| width: 300px; |
| padding: 20px; |
| margin: 20px; |
| border: 1px solid black; |
| background-color: #81AA8A; |
| -webkit-transform-style: preserve-3d; |
| -webkit-box-sizing: border-box; |
| transform: rotateY(20deg); |
| } |
| |
| .transformed-flat { |
| height: 300px; |
| width: 300px; |
| padding: 20px; |
| margin: 20px; |
| border: 1px solid black; |
| background-color: #AA7994; |
| -webkit-transform-style: flat; |
| -webkit-box-sizing: border-box; |
| } |
| |
| .inner { |
| background-color: blue; |
| height: 90px; |
| width: 90px; |
| margin: 40px; |
| } |
| |
| #results { |
| position: absolute; |
| left: 30px; |
| top: 650px; |
| } |
| |
| #mousepos { |
| position: absolute; |
| left: 30px; |
| top: 600px; |
| color: gray; |
| font-size: smaller; |
| } |
| </style> |
| </head> |
| <body onclick="clicked(event)"> |
| |
| <!-- <div id="filler" style="position: absolute; top: 0; width: 100%; height: 100%"></div> --> |
| |
| <div class="test"> |
| <!-- Flatten in the middle of 3d --> |
| <div class="container box" id="box1"> |
| <div class="transformed-3d box" id="box2"> |
| <div class="transformed-3d box" style="transform: translateZ(40px) rotateX(10deg)" id="box3"> |
| <div class="transformed-flat box" style="transform: translate3d(0, 20px, 40px) rotateX(-15deg)" id="box4"> |
| <div class="transformed-flat box" style="-webkit-perspective: 500" id="box5"> |
| <div class="transformed-3d box" style="-webkit-transform-origin: top left; transform: rotateY(-15deg);" id="box6"> |
| <div class="transformed-3d box" style="-webkit-transform-origin: top left; transform: translateZ(20px)" id="box7"> |
| <div class="inner" id="box8"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="results"></div> |
| <div id="mousepos"></div> |
| |
| </body> |
| </html> |
