CSS Flip: Links not working in Chrome (webkit) - css

Question

I'm trying to create a simple CSS Flip effect on some images and put links on the backside... however, the links work in FireFox, but not Chrome or Safari.
I've tried many different methods, but I can't seem to figure it out.
/* Artists Flip */
.rsp-img-center {
margin: 0 auto;
}
.front img {
border-radius: 50%;
width: 120px;
height: 120px;
background-color: #000;
}
#f1_container {
position: relative;
margin: 10px auto;
width: 200px;
height: 175px;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
}
#f1_card {
width: 200px;
height: 175px;
position: relative;
transition: 0.6s;
transform-style: preserve-3d;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
}
#f1_container:hover #f1_card {
position: relative;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg) scale(1);
-moz-transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
z-index: 100;
clear: both;
top: 0;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.face.back {
display: inline-block;
z-index: 500;
position: absolute;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-image: url("http://beta2.thrivemusic.com/wp-content/uploads/2014/07/flip_back.png");
background-attachment:local;
position: relative;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
}
.face.back a{
z-index: 9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}
.front {
background-color: #000000;
}
.back {
background-attachment:local;
background-position:center;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Here's the codepen URL: http://codepen.io/samkimdesign/pen/tAvDn
Any help would be greatly appreciated, thanks!

Answer 1

Just in case, have a look at my jsfiddle
css3 and html :
#card {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
width: 250px;
height: 250px;
position: relative;
}
.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 1s ease-in;
-moz-transition: -moz-transform 1s ease-in;
-ms-transition: -ms-transform 1s ease-in;
-o-transition: -ms-transform 1s ease-in;
transition: transform 1s ease-in;
width: 100%;
height: 100%;
padding: 20px;
font-family: Helvetica, Arial, sans-serif;
color: #000;
font-weight: bold;
box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
border-radius: 4px;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #bde;
overflow: hidden;
}
.front {
background: #fde;
}
#card-container {
display: inline-block;
text-align: justify;
}
#card-container:target .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#card-container:target .front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
<div id="card-container">
<div id="card">
<div class="back">This is the back of the card
<br/>Go to front
</div>
<div class="front">This is the front of the card
<br/>Go to back
</div>
</div>
</div>