我的Javascript动画书代码在Chrome上运行良好，但在Firefox上有问题。我如何实现解决方案？

我用HTML、CSS3和JavaScript创建了一本动画书。它在Google Chrome上运行良好，但在Firefox上运行不正常。我在谷歌上搜索并试图找到答案。在大多数情况下，据说Firefox的处理方式与Chrome不同。但没有解决办法。输出在下面的链接中。如果使用Chrome打开，它可以正常工作，但如果使用Firefox打开，则会产生问题

我的代码是：

var-front=document.querySelector（'.face-front'）；
var back=document.querySelector（'.faceback'）；
var flip=document.querySelector（“.book content”）；
var uno=document.querySelectorAll（'.book'）；
var portada=document.querySelectorAll（“#portada”）；
var contZindex=2；
var customZindex=1；
//javascript提升功能启动
//javascript提升功能结束
对于（变量i=0；i

*{
pddding:0；
保证金：0；
字体系列：无衬线；
}
p{
边际上限：0；
字体大小：14px；
文本对齐：对齐；
}
/*javascript的类启动*/
.trnsf{
/*用于差异浏览器的转换启动*/
-webkit转换：translateX（80px）；
-moz变换：translateX（80px）；
-ms变换：translateX（80px）；
-o变换：translateX（80px）；
转换：translateX（80px）；
/*不同浏览器端的变换*/
}
.trnsf重置{
/*用于差异浏览器的转换启动*/
-webkit转换：translateX（0px）；
-moz变换：translateX（0px）；
-ms变换：translateX（0px）；
-o-变换：translateX（0px）；
转换：translateX（0px）；
/*不同浏览器端的变换*/
}
/*javascript端的类*/
.container、.book内容{
/*显示flex启动*/
显示器：flex；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
/*显示柔性末端*/
/*调整内容开始*/
证明内容：中心；
-webkit盒包：中心；
-webkit内容：中心；
-莫兹盒包装：中心；
-ms-flex-pack:center；
/*证明内容结束*/
/*将项目对齐到中心*/
对齐项目：居中；
-webkit框对齐：居中；
-moz框对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
/*将项目对齐到中心*/
}
.集装箱{
宽度：100%；
高度：100vh；
背景：#2d6f75；
}
.书籍内容{
宽度：65%；
最小宽度：250px；
最大宽度：400px；
高度：330px；
位置：相对位置；
/*css透视图开始*/
-webkit透视图：1000px；
-moz透视图：1000px；
-ms透视图：1000px；
-o-透视图：1000px；
透视图：1000px；
/*css端透视图*/
过渡：1s；
}
.书{
位置：绝对位置；
宽度：65%；
身高：100%；
过渡：1s；
/*变换样式开始*/
变换样式：保留-3d；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-ms变换样式：preserve-3d；
-o变换样式：preserve-3d；
/*变换样式结束*/
/*转换奥列金开始*/
变换原点：左；
-webkit变换原点：左；
-moz变换原点：左；
-ms变换原点：左；
-o变换原点：左；
/*变换奥列金末端*/
}
.面朝前，.面朝后{
宽度：100%；
身高：100%；
填充：15px；
背景：白色；
框大小：边框框；
溢出：隐藏；
}
.正面{
盒影：镶嵌3px0px 20px-7px黑色；
边框左上半径：3px；
边框左下半径：3px；
}
.面朝后{
位置：绝对位置；
排名：0；
左：0；
/*用于差异浏览器的转换启动*/
变换：translateZ（-1px）rotateY（180度）；
-webkit变换：translateZ（-1px）旋转（180度）；
-莫兹变换：translateZ（-1px）rotateY（180度）；
-ms变换：translateZ（-1px）rotateY（180度）；
-o变换：translateZ（-1px）rotateY（180度）；
/*不同浏览器端的变换*/
盒影：镶嵌-3px 1px 20px-7px黑色；
边框右上角半径：3px；
边框右下半径：3px；
}
#波塔达{
背景：url（'../images/front.jpg'）；
}
#波塔达酒店{
背景：url（'../images/back.jpg'）；
}
#波塔达，波塔达回来{
背景大小：100%100%；
}
/*响应部分从这里开始*/
@媒体屏幕和屏幕（最大宽度：800px）{
p{
字体大小：12px；
}
}

文件
标题1
Lorem ipsum dolor sit amet，奉献精英。铜酸盐，在必要时使用，发明者使用，包括根据合理理由，使用水平的过失

标题2
Lorem ipsum dolor sit amet，奉献精英。铜酸盐，在必要时使用，发明者使用，包括假定的勃兰地溃疡