title: CSS Transform flickering on chrome and IE
body: <p>I'm attempting to make a div appear by having it hidden forced via <code>rotate</code> and <code>backface-visibility.</code> The issue is that it is flickering and then disappears after a second. This happens on Chrome. On IE11 it is not appearing at all...</p>
  
  <p><a href="http://jsfiddle.net/1xq96btg/" rel="nofollow">http://jsfiddle.net/1xq96btg/</a></p>
  
  <p>It's working fine on Firefox.</p>
  
  <p>EDIT: I'm using just <code>backface-visibilty</code> on its own as when I included its variants it became even more unstable and strange behaving.</p>
  
  <p>EDIT 2: <code>z-index</code> doesn't seem to be helping either.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="one-third-box" onclick="location.href='#'"&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;img src="http://www.example.com/image/jpg" /&gt;
      &lt;div class="box-description"&gt;this is a test description&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.one-third-box {
      float: left;
      margin-bottom: 2px;
      margin-right: 0.2%;
      width: 33.2%;
      position:relative;
      perspective: 1000;
      cursor:pointer;
  }
  .one-third-box:hover {
      transform: rotateY(180deg);
      transition: 0.6s;
      transform-style: preserve-3d;
  }
  .one-third-box:hover img {
      -moz-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      filter: FlipH;
      -ms-filter:"FlipH";
      position:relative;
      top:-1px;
  }
  .one-third-box:hover .overlay {
      backface-visibility: hidden;
  }
  .box-description {
      backface-visibility: hidden;
      background: none repeat scroll 0 0 #2f5d70;
      bottom: 0;
      color: #fff;
      font-size: 18px;
      font-weight: lighter;
      height: 38%;
      padding-left: 10%;
      padding-top: 6%;
      position: absolute;
      transform: rotateY(-180deg);
      width: 100%;
      padding-right: 10%;
  }
  .overlay {
      position:absolute;
      width:100%;
      height:100%;
      background:url('images/overlay.png');
  }
  .one-third-box &gt; img {
      width: 100%;
  }
  </code></pre>