third_party/WebKit/LayoutTests/transforms/transform-properties-mixed-expected.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    transform: translate3d(0, 0, 50px);
  32 }
  33 .back {
  34    background: rgba(0, 255, 0, 1);
  35    color: black;
  36    transform: translate3d(0, 0, -50px) rotate3d(0, 1, 0, 180deg);
  37 }
  38 .right {
  39    background: rgba(196, 0, 0, 0.7);
  40    transform: translate3d(50px, 0, 0) rotate3d(0, 1, 0, 90deg);
  41 }
  42 .left {
  43    background: rgba(0, 0, 196, 0.7);
  44    transform: translate3d(-50px, 0, 0) rotate3d(0, 1, 0, -90deg);
  45 }
  46 .top {
  47    background: rgba(196, 196, 0, 0.7);
  48    transform: translate3d(0, -50px, 0) rotate3d(1, 0, 0, 90deg);
  49 }
  50 .bottom {
  51    background: rgba(196, 0, 196, 0.7);
  52    transform: translate3d(0, 50px, 0) rotate3d(1, 0, 0, -90deg);
  53 }
  54 .scaleX {
  55     transform: scale3d(0.5, 1, 1);
  56 }
  57 .scaleY {
  58     transform: scale3d(1, 0.5, 1);
  59 }
  60 .scaleZ {
  61     transform: scale3d(1, 1, 0.5);
  62 }
  63 </style>
  64
  65 <div class="container">
  66     <div class="cube scaleY">
  67         <div class="face front">1</div>
  68         <div class="face back">2</div>
  69         <div class="face right">3</div>
  70         <div class="face left">4</div>
  71         <div class="face top">5</div>
  72         <div class="face bottom">6</div>
  73     </div>
  74     <div class="cube scaleX scaleZ">
  75         <div class="face front">1</div>
  76         <div class="face back">2</div>
  77         <div class="face right">3</div>
  78         <div class="face left">4</div>
  79         <div class="face top">5</div>
  80         <div class="face bottom">6</div>
  81     </div>
  82 </div>