Firefox中CSS翻转动画的问题

我尝试在我的网站上使用David Walsh的CSS翻转动画示例。我的代码片段中的代码与Firefox不兼容

如何在不使用javascript魔术的情况下修复此代码？为什么最新版本的Firefox会出现这种情况

#翻转块#主{
位置：相对位置；
宽度：100%；
文本对齐：居中；
}
.翻转容器{
左边距：15px；
右边距：20px；
边缘底部：30px；
显示：内联块；
-webkit透视图：1000；
-莫兹透视图：1000；
-o型透视图：1000；
-ms透视图：1000；
前景：1 000；
-ms变换：透视图（1000px）；
-moz变换：透视图（1000px）；
-o变换：透视图（1000px）；
-webkit转换：透视图（1000px）；
变换：透视（1000px）；
-moz变换样式：preserve-3d；
-webkit变换样式：保留-3d；
-ms变换样式：preserve-3d；
变换样式：保留-3d；
}
/*开始：适应IE*/
.flip-container:hover.back、.flip-container.hover.back{
-webkit变换：rotateX（0度）；
-moz变换：rotateX（0度）；
-o变换：旋转（0度）；
-ms变换：rotateX（0度）；
变换：旋转（0度）；
}
.flip容器：悬停.front、.flip-container.hover.front{
-webkit变换：rotateX（-180度）；
-moz变换：rotateX（-180度）；
-o变换：旋转度（-180度）；
-ms变换：rotateX（-180度）；
变换：rotateX（-180度）；
}
/*结束：为IE提供住宿*/
.翻转容器，.正面，.背面{
宽度：300px；
高度：230像素；
}
.鳍状肢{
-webkit转换：0.6s；
-webkit变换样式：保留-3d；
-ms转换：0.6s；
-moz跃迁：0.6s；
-moz变换：透视图（1000px）；
-moz变换样式：preserve-3d；
-ms变换样式：preserve-3d；
过渡：1s；
变换样式：保留-3d；
位置：相对位置；
}
.前面，.后面{
边框：4倍纯黑；
边界半径：10px；
填充：10px；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-ms背面可见性：隐藏；
背面可见性：隐藏；
-webkit转换：1s；
-webkit变换样式：保留-3d；
-webkit变换：rotateX（180度）；
-moz跃迁：1s；
-moz变换样式：preserve-3d；
-moz变换：rotateX（180度）；
-o-转变：1s；
-o变换样式：preserve-3d；
-o变换：旋转（180度）；
-ms转换：1s；
-ms变换样式：preserve-3d；
-ms变换：rotateX（180度）；
过渡：1s；
变换样式：保留-3d；
变换：rotateX（180度）；
位置：绝对位置；
排名：0；
左：0；
}
.前线{
-webkit变换：rotateX（0度）；
-ms变换：rotateX（0度）；
背景色：#00E743；
z指数：2；
}
.回来{
背景：#00e743；
-webkit变换：rotateX（-180度）；
-moz变换：rotateX（-180度）；
-o变换：旋转度（-180度）；
-ms变换：rotateX（-180度）；
变换：rotateX（-180度）；
}
.back>a{
颜色：#ffffff；
文字装饰：下划线！重要；
字体大小：14px；
填充物：5px；
显示：块；
宽度：自动；
高度：自动；
边缘顶部：160px；
文字装饰：无；
}
.back>a：悬停{
颜色：#000000；
背景色：#00e743；
文字装饰：无；
}

第一：光学前端
第二：正面贴纸
第三：音频前端
第四：阿尔坎塔拉前线

在您的

样式中。front

缺少未加前缀的transform属性：

.front {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    background-color: #00E743;
    z-index: 2;
}

如果您添加它，它似乎可以工作：

.front {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    background-color: #00E743;
    z-index: 2;
}

---

哦这是我的疏忽。谢谢你，乔希，没问题！我们都去过：）