firefox css动画旋转问题

我想要一个css旋转，我有一个背和一个首页，它应该在页面加载时旋转多次

在chrome（webkit）中一切正常，但在firefox上，当动画达到一半时，首页就会转到错误的一边。（我没有注意其他浏览器）

有谁能给我一个提示，如何修复它，使其与两种浏览器一起工作

下面是代码笔，其中有一个简化的示例：

以下是firefox的部分代码：

.front，
.回来{
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
@关键帧介绍前转向动画{
0%{变换：旋转3d（0,1,0,360度）；}
50%{变换：旋转3D（0,1,0,180度）透视图（400px）；}
100%{变换：旋转3d（0,1,0,1deg）；}
}
@关键帧介绍将动画转回{
0%{变换：旋转3d（0,1,0,180度）；}
50%{变换：旋转3D（0,1,0,0度）透视图（400px）；}
100%{变换：旋转3d（0,1,0，-179deg）；}
}

---

您正在应用

透视图

内

@关键帧

。正确的方法是将其应用于父元素，而不是要对其应用透视效果的元素。这就是问题的根源

因此，在

.container

上应用

透视图


.front，
.回来{
最高：20%；
左：20%；
显示：块；
位置：绝对位置；
宽度：60%；
身高：60%；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.集装箱{
位置：相对位置；
保证金：0自动；
顶部：10px；
宽度：60%；
高度：400px；
-webkit透视图：400px；
透视图：400px；
}
.前线{
背景色：红色；
}
.回来{
背景颜色：蓝色；
}
@-webkit关键帧介绍前转向动画{
0% {
-webkit变换：旋转3D（0,1,0,360度）；
}
50% {
-webkit变换：旋转3D（0,1,0,180度）；
}
100% {
-webkit变换：旋转3d（0,1,0,1deg）；
}
}
@关键帧介绍前转向动画{
0% {
变换：旋转3d（0,1,0,360度）；
}
50% {
变换：旋转3d（0,1,0,180度）；
}
100% {
变换：旋转3d（0,1,0,1deg）；
}
}
@-webkit关键帧介绍将动画转回{
0% {
-webkit变换：旋转3D（0,1,0,180度）；
}
50% {
-webkit变换：旋转3D（0,1,0,0度）；
}
100% {
-webkit变换：旋转3D（0,1,0，-180度）；
}
}
@关键帧介绍将动画转回{
0% {
变换：旋转3d（0,1,0,180度）；
}
50% {
变换：旋转3d（0,1,0,0度）；
}
100% {
变换：旋转3d（0,1,0，-179deg）；
}
}
.前线{
-webkit动画：介绍转动画前2秒缓进5秒正常；
动画：介绍转动画前2秒缓进5正常；
}
.回来{
-webkit动画：介绍动画返回2秒轻松输入输出5正常；
动画：介绍动画返回2秒轻松输入输出5正常；
}