third_party/WebKit/LayoutTests/transforms/transform-properties-mixed.html

   1 <!DOCTYPE html>
   2 <style>
   3 .container {
   4    width: 200px;
   5    height: 200px;
   6    margin: 75px 0 0 75px;
   7    border: none;
   8 }
   9 .cube {
  10    width: 100%;
  11    height: 100%;
  12    backface-visibility: visible;
  13    perspective-origin: 150% 150%;
  14    transform-style: preserve-3d;
  15    perspective: 500px;
  16 }
  17 .face {
  18    display: block;
  19    position: absolute;
  20    width: 100px;
  21    height: 100px;
  22    border: none;
  23    line-height: 100px;
  24    font-family: sans-serif;
  25    font-size: 60px;
  26    color: white;
  27    text-align: center;
  28 }
  29 .front {
  30    background: rgba(0, 0, 0, 0.3);
  31    translate: 0 0 50px;
  32 }
  33 .back {
  34    background: rgba(0, 255, 0, 1);
  35    color: black;
  36    translate: 0 0 -50px;
  37    rotate: 180deg 0 1 0;
  38 }
  39 .right {
  40    background: rgba(196, 0, 0, 0.7);
  41    translate: 50px 0 0;
  42    rotate: 90deg 0 1 0;
  43 }
  44 .left {
  45    background: rgba(0, 0, 196, 0.7);
  46    translate: -50px 0 0;
  47    rotate: -90deg 0 1 0;
  48 }
  49 .top {
  50    background: rgba(196, 196, 0, 0.7);
  51    translate: 0 -50px 0;
  52    rotate: 90deg 1 0 0;
  53 }
  54 .bottom {
  55    background: rgba(196, 0, 196, 0.7);
  56    translate: 0 50px 0;
  57    rotate: -90deg 1 0 0;
  58 }
  59 .scaleX {
  60     scale: 0.5 1.0 1.0;
  61 }
  62 .scaleY {
  63     scale: 1.0 0.5 1.0;
  64 }
  65 .scaleZ {
  66     scale: 1.0 1.0 0.5;
  67 }
  68 </style>
  69
  70 <div class="container">
  71     <div class="cube scaleY">
  72         <div class="face front">1</div>
  73         <div class="face back">2</div>
  74         <div class="face right">3</div>
  75         <div class="face left">4</div>
  76         <div class="face top">5</div>
  77         <div class="face bottom">6</div>
  78     </div>
  79     <div class="cube scaleX scaleZ">
  80         <div class="face front">1</div>
  81         <div class="face back">2</div>
  82         <div class="face right">3</div>
  83         <div class="face left">4</div>
  84         <div class="face top">5</div>
  85         <div class="face bottom">6</div>
  86     </div>
  87 </div>