Javascript 旋转卡动画毛刺

我正在尝试制作旋转卡片动画。但是，每当我在其中一侧使用一些

position:absolute

元素时，动画就会变得异常流畅，并且从后面可以看到正面。到目前为止，它在chrome上是可以管理的，但是在Safari上，如果没有这个bug，我的设计很难正常工作。下面是两个浏览器上出现问题的一些代码，请告知问题所在

var isLeft=true；
var x=document.getElementById（“卡”）；
setInterval（函数（）{
if（isLeft）{
x、 style.transform='rotateY（360度）'；
}
否则{
x、 style.transform='rotateY（0度）'；
}
isLeft=！isLeft；
},5000);
.scene{
宽度：480px；
高度：480px；
透视图：35em；
位置：绝对位置；
左：100px；
顶部：100px；
}
.卡片{
宽度：220px；
高度：380px；
左：130像素；
顶部：50px；
位置：绝对位置；
转型：转型4s；
变换样式：保留-3d；
}
.脸{
边界半径：10px；
宽度：100%；
身高：100%；
颜色：#FFF；
/*线高：15em；
文本对齐：居中*/
位置：绝对位置；
背面可见性：隐藏；
-webkit背面可见性：隐藏；
}
.前线{
位置：绝对位置；
背景色：白色；
/*边框：1px纯黑*/
}
.回来{
位置：绝对位置；
背景色：白色；
变换：旋转（180度）；
溢出：隐藏；
/*边框：1px纯黑*/
}
尝试添加
z-index:1进入
。面
类：


var isLeft=true；
var x=document.getElementById（“卡”）；
setInterval（函数（）{
if（isLeft）{
x、 style.transform='rotateY（360度）'；
}
否则{
x、 style.transform='rotateY（0度）'；
}
isLeft=！isLeft；
},5000);
.scene{
宽度：480px；
高度：480px；
透视图：35em；
位置：绝对位置；
左：100px；
顶部：100px；
}
.卡片{
宽度：220px；
高度：380px；
左：130像素；
顶部：50px；
位置：绝对位置；
转型：转型4s；
变换样式：保留-3d；
}
.脸{
边界半径：10px；
宽度：100%；
身高：100%；
颜色：#FFF；
/*线高：15em；
文本对齐：居中*/
位置：绝对位置；
背面可见性：隐藏；
-webkit背面可见性：隐藏；
z索引：1；/*适用于MS Edge*/
}
.前线{
位置：绝对位置；
背景色：白色；
/*边框：1px纯黑*/
}
.回来{
位置：绝对位置；
背景色：白色；
变换：旋转（180度）；
溢出：隐藏；
/*边框：1px纯黑*/
}