third_party/WebKit/LayoutTests/transforms/3d/point-mapping/3d-point-mapping-3.html

   1 <html>
   2 <head>
   3   <title>Point mapping through 3D transform hierarchies</title>
   4   <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8"></script>
   5   <script type="text/javascript" charset="utf-8">
   6
   7     function test()
   8     {
   9       // In non-test mode, show the mouse coords for testing
  10       if (!window.testRunner)
  11         document.body.addEventListener('mousemove', mousemoved, false);
  12
  13       dispatchEvent(158, 83, 'card', 2, 2);
  14       dispatchEvent(309, 112, 'card', 198, 2);
  15       dispatchEvent(158, 338, 'card', 2, 198);
  16       dispatchEvent(309, 308, 'card', 198, 198);
  17     }
  18   </script>
  19   <style type="text/css" media="screen">
  20   #scene {
  21     position: absolute;
  22     border: 1px solid black;
  23     height: 400px;
  24     width: 400px;
  25     -webkit-perspective: 600;
  26     -webkit-transform-style: preserve-3d;
  27   }
  28
  29   #container {
  30     position: absolute;
  31     height: 300px;
  32     width: 300px;
  33     margin: 50px;
  34     border: 1px solid blue;
  35     -webkit-transform-style: preserve-3d;
  36   }
  37
  38   #card {
  39     position: absolute;
  40     top: 50px;
  41     left: 50px;
  42     height: 200px;
  43     width: 200px;
  44     background-color: #81AA8A;
  45     -webkit-transform-origin: right top;
  46     transform: rotateY(45deg);
  47   }
  48
  49   #card:hover {
  50     background-color: orange;
  51   }
  52
  53   #results {
  54     position: absolute;
  55     left: 30px;
  56     top: 500px;
  57   }
  58
  59   #mousepos {
  60     position: absolute;
  61     left: 430px;
  62     top: 400px;
  63     color: gray;
  64     font-size: smaller;
  65   }
  66   </style>
  67 </head>
  68 <body onclick="clicked(event)">
  69
  70 <div id="results"></div>
  71
  72 <div id="scene">
  73   <div id="container">
  74     <div id="card"></div>
  75   </div>
  76 </div>
  77
  78 <div id="mousepos"></div>
  79
  80 </body>
  81 </html>