CSS card flip animation for WebKit browsers prevents links from functioning

Question

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.

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.

How would I go about modifying what I have to get the links to fire correctly?

A live demo of the issue is available on CodePen . Code is listed below for convenience, as well.

HTML

<div class='flip'>
  <div class='card'>
    <div class='front face'>
      <a href='http://periphery.in'><h3>Rahul</h3></a>
    </div>
    <div class='back face'>
      <a href='http://github.com/O-I'><h3>O-I</h3></a>
    </div>
  </div>
</div>

CSS

.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;
}

JQuery

$('.flip').click(function(){
  $(this).find('.card').addClass('flipped').mouseleave(function(){
    $(this).removeClass('flipped');
  });
  return false;
});

I've seen a similar issue discussed on this Stack Overflow question and in this bug report , but I'm still having trouble getting my specific example to work. Any leads in the right direction would be much appreciated. Thanks!

Answer 1

I forked and fixed your CodePen ( EDIT : moved it to JSbin so the link action would prove to work).

Here's the awesomeness

CSS Changes:

h3 {
    display: inline;
}

Either that or make it a <span> lol

Javascript:

$(document).on('click', '.flip', function(){
  $(this).find('.card').addClass('flipped').mouseleave(function(){
    $(this).removeClass('flipped');
  });
  return false;
});
$(document).on('click', 'a', function(evt) {
  var e = evt || window.event;
  var clickedOn = (e.currentTarget) ? e.currentTarget : e.srcElement;
  e.stopPropagation();
  window.location.href = clickedOn.href;
});

Answer 2

You need to stop the click event from propagating from your link to the card. Add this js code:

$('.flip a').on('click', function(e){
   e.stopPropagation();
});