title: Webkit backface visibility not working
body: <p>I'm building a simple example to flip a card using the <code>-webkit-transform: rotateY</code> property.</p>
  
  <p>It was working fine a couple of days ago, but all of a sudden it stop working. The effect still works, but when I hover over the card, the front side should disappear to make the back side visible. for this I'm using the <code>-webkit-backface-visibility: hidden</code> property. But it seems that is not working anymore in chrome (Both in the stable and the nightly build version)</p>
  
  <p>Here is the code in case I'm doing something terrible bad</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Card Flip Using CSS&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body {
              background-color: #3d994a;
          }
          h1 {
              font-size: 30pt;
              width: 100%;
              margin: 0;
              padding: 0;
              text-align: center;
              display: block;
              text-shadow: 1px -1px 0px #4E4E4E;
          }
          #container { 
              -webkit-perspective: 1000; 
          }
          .card {
              position: relative;
              width: 286px;
              height: 392px;
              -webkit-transform-style: preserve-3d;           
              -webkit-transition: all 0.5s linear;           
          }   
          #container:hover .card{
              -webkit-transform: rotateY(180deg);
          }
          .face {
              position: absolute;
              width: 100%;
              height: 100%;
              -webkit-backface-visibility: hidden;
              border-radius: 20px;    
              border:1px solid #eee;
              background-color: #FFF;
              box-shadow: #000 3px 2px 4px;
          }
          .back {
              -webkit-transform:rotateY(180deg);  
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;Hover over the card to flip it&lt;/h1&gt;
      &lt;div id="container"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front face"&gt;            
                  &lt;img src="images/back.png" alt="" /&gt;
              &lt;/div&gt;
              &lt;div class="back face"&gt;
                  &lt;img src="images/front.png" alt="" /&gt;
              &lt;/div&gt;      
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I came to this conclusion because I made a couple of simple examples using only a rotated div with a simple text on it, the backface hidden property and it was still visible.
  Also, <a href="http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html" rel="noreferrer">this example</a> uses this property and also stopped working.
  So, to sum up, my question is, does anyone else have problem with this property or is there a problem with my code?</p>