layout/reftests/transform-3d/backface-visibility-2-ref.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4         <style>
   5         #container {
   6                 position: relative;
   7                 margin: 10px auto;
   8                 width: 450px;
   9                 height: 281px;
  10                 z-index: 1;
  11                 perspective: 1000px;
  12         }
  13         #card {
  14                 width: 100%;
  15                 height: 100%;
  16                 transform-style: preserve-3d;
  17         transform: rotateY(165deg);
  18         }
  19         .face {
  20                 position: absolute;
  21                 width: 100%;
  22                 height: 100%;
  23     backface-visibility: hidden;
  24     background: red;
  25         }
  26         .face.back {
  27                 display: block;
  28                 transform: rotateY(180deg);
  29                 box-sizing: border-box;
  30                 padding: 10px;
  31                 color: white;
  32                 text-align: center;
  33                 background: green;
  34         }
  35         </style>
  36
  37         <div id="container" class="hover">
  38                 <div id="card">
  39                         <div class="back face">
  40                         </div>
  41                 </div>
  42     </div>
  43 </body></html>