3 <title>Point mapping through 3D transforms</title>
4 <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8"></script>
6 <script type="text/javascript" charset="utf-8">
10 dispatchEvent(44, 44, 'box1', 2, 2);
11 dispatchEvent(69, 55, 'box2', 2, 2);
12 dispatchEvent(165, 182, 'box2', 96, 96);
13 dispatchEvent(333, 79, 'box7', 2, 2);
14 dispatchEvent(87, 325, 'box10', 2, 2);
15 dispatchEvent(196, 467, 'box10', 98, 98);
16 dispatchEvent(333, 325, 'box13', 2, 2);
17 dispatchEvent(353, 352, 'box14', 2, 2);
18 dispatchEvent(472, 507, 'box14', 97, 97);
22 <style type="text/css" media="screen">
26 border: 1px solid black;
51 border: 1px solid black;
58 -webkit-box-sizing: border-box;
59 background-color: #DDD;
60 border: 1px solid black;
64 outline: 3px solid orange;
71 border: 1px solid black;
72 -webkit-box-sizing: border-box;
73 -webkit-perspective: 400;
82 border: 1px solid black;
83 background-color: #AAA;
84 -webkit-box-sizing: border-box;
85 transform: translateZ(100px) rotateY(-40deg);
90 background-color: #C0D69E;
94 background-color: blue;
112 <body onclick="clicked(event)">
114 <div id="results"></div>
116 <div class="test one">
117 <!-- Simple transformed div in perpsective -->
118 <div class="container box" id="box1">
119 <div class="transformed box" id="box2">
124 <div class="test two">
125 <!-- Transformed div in perpsective with non-layer child -->
126 <div class="container box" id="box5">
127 <div class="transformed box" id="box6">
128 <div class="inner box" id="box7">
134 <div class="test three">
135 <!-- Transformed div in perpsective with layer child -->
136 <div class="container box" id="box8">
137 <div class="transformed box" id="box9">
138 <div class="inner box" style="position: relative" id="box10">
144 <div class="test four">
145 <!-- Transformed div in perpsective with child having layer child -->
146 <div class="container box" id="box11">
147 <div class="transformed box" id="box12">
148 <div class="layer box" id="box13">
149 <div class="inner box" style="position: relative" id="box14">
156 <div id="mousepos"></div>