title: Transform makes back side of 3D card unclickable
body: <p>I want to make flip like <a href="http://desandro.github.io/3dtransforms/examples/card-01.html" rel="nofollow">http://desandro.github.io/3dtransforms/examples/card-01.html</a></p>
  
  <p>But with buttons on each side. So here is my <strong>html</strong></p>
  
  <pre><code>&lt;div class="flip-container"&gt;
      &lt;div class="flip"&gt;
          &lt;div class="side front"&gt;
              &lt;p&gt;front&lt;/p&gt;
              &lt;button class="front-flip-button"&gt;flip&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="side back"&gt;
              &lt;p&gt;back&lt;/p&gt;
              &lt;button class="back-flip-button"&gt;flip&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and <strong>css</strong></p>
  
  <pre><code>.flip-container{
      position: relative;
      -webkit-perspective: 800;
      width: 500px;
      height: 300px;
  }
  .flip{
      position: absolute;
      width: inherit;
      height: inherit;
      -webkit-transform-style: preserve-3d;
      -webkit-transition-duration: 500ms;
      -webkit-transform: translate3d(0, 0, 0);
      border: 1px solid;
  }
  .side{
      position: absolute;
      width: inherit;
      height: inherit;
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;
  }
  .flip.flipped,
  .back{
      -webkit-transform: rotate3d(0, 1, 0, 180deg);
  }
  .back-flip-button,
  .front-flip-button{
      position: absolute;
      left: 0;
      top: 0;
  }
  p{
      font-size: 90px;
      text-align: center;
  }
  </code></pre>
  
  <p>And everything is pretty good, but when I use some element with <code>translateZ</code> it makes back button unclickable. </p>
  
  <pre><code>&lt;div class="flip-container"&gt;
      &lt;div class="flip"&gt;
          &lt;div class="side front"&gt;
              &lt;p&gt;front&lt;/p&gt;
              &lt;button class="front-flip-button"&gt;flip&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="side back"&gt;
              &lt;p&gt;back&lt;/p&gt;
              &lt;button class="back-flip-button"&gt;flip&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="some"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Why is that happening?</p>
  
  <p><a href="http://jsfiddle.net/j5Sm4/" rel="nofollow">http://jsfiddle.net/j5Sm4/</a></p>