layout/reftests/transform-3d/animate-cube-degrees-ref.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <title>Reftest, bug 1156456</title>
   4 <style>
   5
   6 html, body {
   7   height: 100%;
   8 }
   9
  10 body {
  11   background: white;
  12   perspective: 1000px;
  13 }
  14
  15 div, div::before, div::after {
  16   width: 200px; height: 200px;
  17 }
  18
  19 div {
  20   position: absolute;
  21   top: 0; right: 0; bottom: 0; left: 0;
  22   margin: auto;
  23   transform-origin: 50% 50% 100px;
  24   background: #006;
  25   transform: rotateY(-120deg) rotateX(60deg);
  26   transform-style: preserve-3d;
  27 }
  28
  29 div::before, div::after {
  30   position: absolute;
  31   top: 0; left: 0;
  32   content: "";
  33 }
  34
  35 div::before {
  36   background: #00f;
  37   transform: translate3D(100px, 0, 100px) rotateY(90deg);
  38 }
  39
  40 div::after {
  41   background: #00c;
  42   transform: translate3D(0, -100px, 100px) rotateX(90deg);
  43 }
  44
  45 </style>
  46 <div></div>