CSS翻转：链接在Chrome中不起作用（webkit）

我正在尝试在一些图像上创建一个简单的CSS翻转效果，并在背面放置链接。。。然而，这些链接在FireFox中有效，但在Chrome或Safari中无效

我试过许多不同的方法，但我似乎弄不明白

/* 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);
}

以下是代码笔URL：

---

任何帮助都将不胜感激，谢谢

以防万一，看一看

css3和html：

#卡{
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-ms变换样式：preserve-3d；
-o变换样式：preserve-3d；
变换样式：保留-3d；
-webkit透视图：1000；
-莫兹透视图：1000；
-ms透视图：1000；
-o型透视图：1000；
前景：1 000；
宽度：250px；
高度：250px；
位置：相对位置；
}   
.后，.前{
位置：绝对位置；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-ms背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
-webkit转换：-webkit转换1s易用性；
-moz转换：-moz转换1s易用性；
-ms转换：-ms转换1秒容易进入；
-o-转换：-ms转换1s容易进入；
转换：转换1s轻松；
宽度：100%；
身高：100%；
填充：20px；
字体系列：Helvetica、Arial、无衬线字体；
颜色：#000；
字体大小：粗体；
盒影：嵌入0px 0px 20px rgba（0,0,0,0.4）；
边界半径：4px；
}
.回来{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-ms变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
背景：#溴二苯醚；
溢出：隐藏；
}   
.前线{
背景：#fde；
}
#卡片容器{
显示：内联块；
文本对齐：对齐；
}   
#卡片容器：target.back{
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-ms变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}
#卡容器：target.front{
-webkit变换：旋转（-180度）；
-莫兹变换：旋转（-180度）；
-ms变换：旋转（-180度）；
-o变换：旋转（-180度）；
变换：旋转（-180度）；
}

这是卡片的背面


这是卡片的正面

哦，等等，我可能已经弄明白了……这是一个极好的解决方案。我能在Chrome和IE（10+）上同时做到这一点。