layout/reftests/transform-3d/animate-preserve3d-ref.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <title>Testcase, bug 1176969</title>
   4 <style>
   5
   6 body { padding: 50px }
   7
   8 #grandparent { perspective: 400px }
   9
  10 #parent {
  11   background: blue;
  12   height: 200px; width: 200px;
  13   border: 1px solid black;
  14   transform-style: preserve-3d;
  15   transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg);
  16   will-change: transform;
  17 }
  18
  19 #child {
  20   transform: translateZ(15px);
  21   height: 100px; width: 100px; margin: 50px;
  22   background: yellow;
  23   box-shadow: 3px 3px olive;
  24 }
  25
  26 </style>
  27
  28 <div id="grandparent">
  29   <div id="parent">
  30     <div id="child">
  31     </div>
  32   </div>
  33 </div>