Javascript 使用CSS/JS Firefox问题翻转卡片

我在Firefox中遇到了一个问题

这适用于chrome、safari和mobile

当你点击卡片时，它会翻转过来，但是当你点击卡片翻转过来时，你仍然可以看到卡片正面的“点击翻转”部分。它显示为颠倒的文本。我尝试过当卡片css具有“翻转”类时，将css定位为隐藏/显示，但它仍然不会消失

这也是Firefox的问题。任何建议都很好

$（'.card'）。单击（函数（）{
$（this.toggleClass（'flipped'）；
});
.card-height2：{
高度：281px；
}
.翻转{
-webkit透视图：800；
前景：800；
位置：相对位置；
光标：指针；
}
.翻转.卡片.翻转{
-webkit变换：rotatex（-180度）；
变换：rotatex（-180度）；
背景：透明；
}
.翻转.卡片{
高度：195px；
-webkit变换样式：保留-3d；
-webkit转换：0.5s；
变换样式：保留-3d；
过渡：0.5s；
}
.翻转.卡片.脸{
-webkit背面可见性：隐藏；
背面可见性：隐藏；
z指数：2；
}
.翻转.卡片.正面{
位置：绝对位置；
宽度：100%；
z指数：1；
背景：#2B5168；
}
.翻转.卡片.背面{
-webkit变换：rotatex（-180度）；
变换：rotatex（-180度）；
左：5%；
}
.翻转.卡片.背面2{
-webkit变换：rotatex（-180度）；
变换：rotatex（-180度）；
左：5%；
垫底：13%；
}
.内部{
保证金：0px
！重要；
}
第1部分卡{
高度：195px；
背景：透明；
背景：#2B5168；
}
.s7小型{
字体大小：14px；
}
.s7%{
颜色：#80c3db；
字体大小：51px；
字号：800；
边际：0px；
}
.s7-1{
字体大小：27px；
文本对齐：左对齐；
边缘顶部：55px；
左边距：50像素；
}
.s7-2{
字体大小：27px；
边际：0px；
}
.s7第7段{
字体大小：27px；
颜色：#85B9CE；
}

JS-Bin
单击可翻转
翻了
添加
变换：旋转（0度）到
.face.front
容器

查看以下答案：
是否尝试添加背面可见性：隐藏；去你的卡课？朱利安·埃斯皮诺萨做到了！非常感谢。这么简单。