Css 透视图在FireFox上不起作用

在Chrome上运行很好，但当我在FireFox上尝试时，它就不起作用了

我在互联网上搜索过，但没有找到对我有帮助的东西

我对变换、动画、过渡等不太了解，所以我尝试了一些修改并移动了“透视图”，但仍然一无所获

这就是CSS

.uic-wrapper {
  height: 340px;
  width: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 500px;
  perspective-origin: 50% -30%;
}
.uic-wrapper:hover .card-middle {
  transform: translate3d(0, 0, -60px);
  opacity: .8;
}

.uic-wrapper:hover .card-back {
  transform: translate3d(0, 0, -120px);
  opacity: .4;
}

他是一个很好的例子

$（文档）.ready（函数（）{
“严格使用”；
var容器=$（“.uic包装”）；
var nextBtn=$（“nav.btn next”）；
var backBtn=$（“资产净值反向”）；
var finishBtn=$（“nav.btn finish”）；
updateNav（）；
函数updateNav（）{
var hasAnyRemovedCard=$（“.toRight”）。长度？true:false，
isCardLast=$（“.card middle”）.length？false:true；
如果（有任何移除卡）{
backBtn.removeClass（'back-btn-hide'）；
}否则{
backBtn.addClass（'back-btn-hide'）；
$（“.card front”）.addClass（'noBack'）；
}
如果（isCardLast）{
nextBtn.hide（）；
finishBtn.removeClass（“隐藏”）；
}否则{
nextBtn.show（）；
finishBtn.addClass（“隐藏”）；
}
}
函数showNextCard（）{
//检查是否只剩下一张卡
如果（$（“.card middle”）.length>0）{
var currentCard=$（“.card front”），
中间卡=$（“.card middle”），
backCard=$（“.card back”），
输出卡=$（“.card out”）.eq（0）；
//卸下前卡
currentCard.removeClass（'card-front'）.addClass（'toRight'）；
//换牌
middleCard.removeClass（'card-middle'）.addClass（'card-front'）；
backCard.removeClass（'card-back'）.addClass（'card-middle'）；
outCard.removeClass（'card-out'）.addClass（'card-back'）；
updateNav（）；
}
}
函数showPreviousCard（）{
var currentCard=$（“.card front”），
中间卡=$（“.card middle”），
backCard=$（“.card back”），
lastRemovedCard=$（“.torRight”）.slice（-1）；
lastRemovedCard.removeClass（'toRight'）.addClass（'card-front'）；
currentCard.removeClass（'card-front'）.addClass（'card-middle'）；
middleCard.removeClass（'card-middle'）.addClass（'card-back'）；
backCard.removeClass（'card-back'）.addClass（'card-out'）；
updateNav（）；
}
下一步（'单击'，函数（））{
showNextCard（）；
});
backBtn.on（'单击'，函数（））{
showPreviousCard（）；
});
});
*{
框大小：边框框；
大纲：无；
}
a{
颜色：#1590d0；
}
html，正文{
背景：#10a3f1；
/*旧浏览器的回退*/
身高：100%；
字体系列：“Roboto”，无衬线；
}
a{
文字装饰：无；
}
h1{
颜色：#6b7d88；
}
.表格组{
边缘顶部：15px；
}
.表格组标签{
颜色：rgba（0,0,0,0.8）；
}
输入[type=“text”]，
输入[type=“password”]{
宽度：100%；
显示：块；
填充：10px；
边界半径：8px；
边界：无；
背景色：#e5eed；
边缘顶部：5px；
}
.隐藏{
显示：无；
}
.uic包装{
高度：340px；
宽度：300px；
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
透视图：500px；
透视来源：50%-30%；
}
.uic包装{
列表样式：无；
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
.uic.ul li{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
过渡：均为0.3秒；
}
.uic包装纸ul li.卡片包装纸.卡片正面{
位置：相对位置；
z指数：3；
盒影：0px 0px 11px 0px rgba（0,0,0,0.19）；
}
.uic包装纸ul li.卡片包装纸.卡片中间{
z指数：2；
}
.uic包装纸ul li.卡片包装纸.卡片背面{
z指数：1；
}
.uic包装器ul li.卡片包装器.卡片输出{
z指数：0；
不透明度：0；
}
.uic包装器导航{
位置：相对位置；
z指数：4；
}
.uic包装器导航a{
颜色：#ffb902；
}
.uic包装器导航btn返回{
字号：28px；
位置：固定；
顶部：20px；
左：20px；
过渡：所有0.3秒缓解；
}
.uic包装器导航btn返回：活动{
变换：尺度（0.96）；
}
.uic包装器导航.btn-back.back-btn-hide{
利润上限：-30px；
不透明度：0；
}
.uic包装器总btn饰面，
.uic包装器导航btn下一步{
位置：绝对位置；
底部：10px；
左：10px；
右：10px；
填充：10px；
背景色：#66bf65；
颜色：白色；
文本对齐：居中；
边界半径：0；
边界半径：8px；
过渡：所有0.3秒缓解；
}
.uic包装器导航btn完成：激活，
.uic包装器导航btn下一步：活动{
变换：比例（0.96）；
}
.uic包装卡{
背景色：#fff；
边界半径：0；
身高：100%；
宽度：100%；
填充：80px20px20px20px；
过渡：所有0.6s三次贝塞尔（0.51,0.02,0.01,0.88）；
边界半径：8px；
}
.uic wrapper.noBack{
填充：20px；
}
.uic包装器.toRight{
转换：translate3d（0,0,100px）；
不透明度：0；
}
.uic wrapper.toLeft{
转化：无；
不透明度：1；
}
.uic包装器：悬停。卡中间{
变换：translate3d（0,0，-60px）；
不透明度：.8；
}
.uic包装器：悬停。卡片返回{
变换：translate3d（0,0，-120px）；
不透明度：.4；
}
.metaInfo{
位置：固定；
底部：20px；
左：20px；
颜色：rgba（255，255，255，0.8）；
}
.元信息a{
颜色：#fff；
文字装饰：下划线；
}





报名
名字
姓


电子邮件
年龄


选择一个用户名
暗语




准备就绪！
@-moz-document url-prefix() {
    .uic-wrapper:hover .card-middle {
        transform: translate3d(14px, -12px, -30px);
        opacity: .8;
        width: 90%;
    }

    .uic-wrapper:hover .card-back {
        transform: translate3d(28px, -24px, -120px);
        opacity: .4;
        width: 80%;
    }
}