Css 3D变换、z索引和Safari

我知道3d变换和z索引不能很好地协同工作，但我有这个问题（仅在Safari中），我希望仍然有解决方案

基本上，我有两个元素相互叠加。“背面”（z索引较低）中的一个正在三维空间中旋转。然而，我仍然希望top元素始终位于top之上

。按钮{
填充：10px 30px；
位置：相对位置；
显示：内联块；
颜色：白色；
光标：指针；
}
.按钮跨度{
位置：相对位置；
z指数：2；
}
.按钮：之后{
内容：“；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
边界半径：10px；
背景：红色；
转变：转变2；
}
.按钮：悬停：之后{
变换：旋转（30度）；
}

正文

变换：旋转（30度）；
-webkit变换：旋转（30度）//chrome和safari添加以下内容：

.button span {
  display: inline-block;
  transform: translateZ(100px);
}



.button{填充：10px 30px；位置：相对；显示：内联块；颜色：白色；光标：指针；}
.按钮span{位置：相对；显示：内联块；转换：translateZ（100px）；z索引：2；}
.按钮：{content:”；位置：绝对；左侧：0；顶部：0；宽度：100%；高度：100%；边框半径：10px；背景：红色；过渡：transform.2s；}
.按钮：悬停：在{transform:rotateY（30度）；}之后

正文