Making clickable 3D figure

Question

I have a CSS-only flip card animation where the other side of the card is shown when the user hovers over the container: https://jsfiddle.net/qb7unks5/3/.

Both sides of the card should be clickable links. Ideally, the entire container would be a clickable link, but the code I have for that doesn't work in Firefox. Because links in JSFiddle never work in Firefox, you actually can't see this by using JSFiddle, but if you were to save off the code and run it independently, you would find that, frequently, the link fails to activate in Firefox under two circumstances:

(1) When you quickly move the mouse into the container and click on the red card's text. The text goes black, indicating that the a:active effect has been triggered, but the link is not actually activated.

(2) When you click on a white (non-red, non-blue) area of the gray-bordered container while the card flip animation is active, the link sometimes fails to activate.

Both these problems only seem to happen in Firefox, not Chrome. And again, because of how JSFiddle in Firefox handles links, you can't really tell by using the JSFiddle link.

The problem is that, apparently, if you click on a link that is somehow associated with a rotating figure in Firefox, and that figure "rotates away" almost immediately afterwards, the a:active state of the link is triggered, but the link isn't activated!

So, I'm assuming that I'll have to create a <a style='display:block'> block of the same size and shape of the container, make its z-index higher than that of the figures, and, by doing so, essentially make the area of the whole container clickable via a link not directly associated with the figures. Is there any better solution?

figure {
    margin: 0;
}

.container {
    width: 200px;
    height: 260px;
    position: relative;
    margin: 0 auto 40px;
    border: 1px solid #CCC;
    -webkit-perspective: 800px;
       -moz-perspective: 800px;
         -o-perspective: 800px;
    	    perspective: 800px;
    }

.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
       -moz-transition: -moz-transform 1s;
         -o-transition: -o-transform 1s;
            transition: transform 1s;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container:hover .card {
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
         -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

.card figure {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 260px;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    position: absolute;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
         -o-backface-visibility: hidden;
    	    backface-visibility: hidden;
}
	
.card .front {
    background: red;
}

.card .back {
    background: blue;
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
         -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

a {
    color: white;
}

a:active {
    color: black;
}

<a href="http://google.com">
    <div class="container">
        <div class="card">
            <figure class="front">Some test text</figure>
            <figure class="back">More text</figure>
        </div>
    </div>
</a>

Answer 1

I have used a pseudo of :after on a block-level <a>.

This will eliminate the need for extra HTML markup, while achieving the desired result.

The pseudo is placed absolute 100% to the relative parent so that it will cover the size of the parent even if that changes.

CODEPEN example

Note: that your original <div class="container"> could be consolidated into the <a> tag itself with this solution.

CSS

a.container {
  color: white;
  position: relative;
  display: block;
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  border: 1px solid #CCC;
  -webkit-perspective: 800px;
   -moz-perspective: 800px;
     -o-perspective: 800px;
        perspective: 800px;
}

a.container:after {
  content: '';
  display:block;
  width: 100%;
  height: 100%;
  z-index: 9999;
  position: absolute;
  top: 0;
}

HTML

<a class="container" href="http://google.com">
  <div class="card">
    <figure class="front">Some test text</figure>
    <figure class="back">More text</figure>
  </div>
</a>