title: CSS card flip animation for WebKit browsers prevents links from functioning
body: <p>I'm trying to figure out how to create a card flip animation that triggers when you click anywhere on the front face of the card and flips back when the mouse leaves. </p>
  
  <p>I have the basic animation working, but the problem is that both sides of the card contain links that seem to be 'blocked' by the animation. Right-clicking on a link works, but directly clicking on one just triggers the animation.</p>
  
  <p>How would I go about modifying what I have to get the links to fire correctly?</p>
  
  <p>A live demo of the issue is available on <a href="http://codepen.io/O-I/pen/nmrvH" rel="nofollow noreferrer">CodePen</a>. Code is listed below for convenience, as well.</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div class='flip'&gt;
    &lt;div class='card'&gt;
      &lt;div class='front face'&gt;
        &lt;a href='http://periphery.in'&gt;&lt;h3&gt;Rahul&lt;/h3&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class='back face'&gt;
        &lt;a href='http://github.com/O-I'&gt;&lt;h3&gt;O-I&lt;/h3&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>.flip {
    -webkit-perspective: 800;
    height: 365px;
    width: 252px;
    position: relative;
    text-align: center;
    line-height: 200px;
  }
  
  .flip .card.flipped {
    -webkit-transform: rotatey(-180deg);
  }
  
  .flip .card {
    width: 100%;
    height: 100%;
    left: -4px;
    top: -4px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.75s;
    position: absolute;
    border: 1px solid black;
  }
  
  .flip .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    z-index: 2;
  }
  
  .flip .card .front {
    position: absolute;
    z-index: 1;
    cursor: pointer;
  }
  
  .flip .card .back {
    -webkit-transform: rotatey(-180deg);
    cursor: pointer;
  }
  
  .back.face {
    overflow-y: scroll;
  }
  </code></pre>
  
  <h3>JQuery</h3>
  
  <pre><code>$('.flip').click(function(){
    $(this).find('.card').addClass('flipped').mouseleave(function(){
      $(this).removeClass('flipped');
    });
    return false;
  });
  </code></pre>
  
  <p>I've seen a similar issue discussed on this Stack Overflow <a href="https://stackoverflow.com/questions/10886656/webkit-transform-blocking-link">question</a> and in this <a href="https://bugs.webkit.org/show_bug.cgi?id=54371" rel="nofollow noreferrer">bug report</a>, but I'm still having trouble getting my specific example to work. Any leads in the right direction would be much appreciated. Thanks!</p>