3 <title>Point mapping through deeply nested 3D transforms</title>
4 <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8"></script>
5 <script type="text/javascript" charset="utf-8">
9 // Scroll so that frame view offsets are non-zero
10 // window.scrollTo(20, 100);
12 // document.getElementById('overflow').scrollLeft = 80;
13 // document.getElementById('overflow').scrollTop = 60;
15 // In non-test mode, show the mouse coords for testing
16 if (!window.testRunner)
17 document.body.addEventListener('mousemove', mousemoved, false);
19 dispatchEvent(45, 45, 'box1', 3, 3);
20 dispatchEvent(54, 44, 'box2', 2, 2);
21 dispatchEvent(104, 93, 'box3', 2, 2);
23 dispatchEvent(175, 137, 'box4', 2, 2);
24 dispatchEvent(167, 528, 'box4', 2, 296);
26 dispatchEvent(227, 197, 'box5', 2, 2);
28 dispatchEvent(539, 569, 'box7', 296, 296);
30 dispatchEvent(431, 441, 'box8', 85, 85);
33 <style type="text/css" media="screen">
37 border: 1px solid black;
42 display: inline-block;
45 border: 1px solid black;
52 -webkit-box-sizing: border-box;
53 background-color: #DDD;
54 border: 1px solid black;
58 outline: 3px solid orange;
65 border: 1px solid black;
66 -webkit-box-sizing: border-box;
67 -webkit-perspective: 400;
75 border: 1px solid black;
76 background-color: #81AA8A;
77 -webkit-transform-style: preserve-3d;
78 -webkit-box-sizing: border-box;
79 transform: rotateY(20deg);
87 border: 1px solid black;
88 background-color: #AA7994;
89 -webkit-transform-style: flat;
90 -webkit-box-sizing: border-box;
94 background-color: blue;
115 <body onclick="clicked(event)">
117 <!-- <div id="filler" style="position: absolute; top: 0; width: 100%; height: 100%"></div> -->
120 <!-- Flatten in the middle of 3d -->
121 <div class="container box" id="box1">
122 <div class="transformed-3d box" id="box2">
123 <div class="transformed-3d box" style="transform: translateZ(40px) rotateX(10deg)" id="box3">
124 <div class="transformed-flat box" style="transform: translate3d(0, 20px, 40px) rotateX(-15deg)" id="box4">
125 <div class="transformed-flat box" style="-webkit-perspective: 500" id="box5">
126 <div class="transformed-3d box" style="-webkit-transform-origin: top left; transform: rotateY(-15deg);" id="box6">
127 <div class="transformed-3d box" style="-webkit-transform-origin: top left; transform: translateZ(20px)" id="box7">
128 <div class="inner" id="box8">
139 <div id="results"></div>
140 <div id="mousepos"></div>