Html 带有否定度的CSS旋转不'；我不在野生动物园工作

我正在尝试制作在Y轴上旋转元素的动画。它在Chrome和Firefox中工作，但在Safari中不工作

我不知道问题出在哪里，因为我之前说过，它在Chrome、Firefox、Opera中运行良好

仅在动画中间工作，另一个中间不工作：(

这是我的密码：

*{
框大小：边框框；
}
.书{
位置：相对位置；
宽度：200px；
高度：300px；
边框：1px纯黑；
}
.书.页{
位置：绝对位置；
宽度：50%；
身高：100%；
背景：红色；
边框：1px纯绿色；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
}
.书页：第n个孩子（2n+1）{
左：0；
变换原点：右中心；
变换：旋转（-180度）；
}
.书页：第n个孩子（2n）{
右：0；
变换原点：左中心；
变换：旋转（0度）；
}
.book.page.page-no-1.active{
变换：旋转（0度）；
}
.book.page.page-no-2.active{
动画：p-2-左10秒；
z指数：2；
变换：旋转（-180度）；
}
.book.page.page-no-2.no-active{
动画：p-2-右10秒；
z指数：3；
变换：旋转（0度）；
}
.book.page.page-no-3.active{
动画：p-3-左10秒；
z指数：3；
变换：旋转（0度）；
}
.book.page.page-no-3.no-active{
动画：p-3-右10秒；
z指数：2；
变换：旋转（-180度）；
}
.book.page.page-no-4.active{
动画：p-4-左10秒；
z指数：4；
变换：旋转（-180度）；
}
.book.page.page-no-4.no-active{
动画：p-4-右10秒；
z指数：2；
变换：旋转（0度）；
}
.book.page.page-no-5.active{
动画：p-5-左10秒；
z指数：5；
变换：旋转（0度）；
}
.book.page.page-no-5.no-active{
动画：p-5-右10秒；
z指数：4；
变换：旋转（-180度）；
}
@关键帧p-5-左{
0%{变换：旋转（-180度）；z索引：4；}
49%{z-指数：4；}
50%{z-指数：5；}
100%{变换：旋转（0度）；z索引：5；}
}
@关键帧p-4-左{
0%{变换：旋转（0度）；z索引：5；}
49%{z-指数：5；}
50%{z-指数：4；}
100%{变换：旋转（-180度）；z索引：4；}
}
@关键帧p-3-左{
0%{变换：旋转（-180度）；z索引：2；}
49%{z-指数：2；}
50%{z-指数：3；}
100%{变换：旋转（0度）；z索引：3；}
}
@关键帧p-2-左{
0%{变换：旋转（0度）；z索引：3；}
49%{z-指数：3；}
50%{z-指数：2；}
100%{变换：旋转（-180度）；z索引：2；}
}
@关键帧p-5-右{
0%{变换：旋转（0度）；z索引：5；}
49%{z-指数：5；}
50%{z-指数：4；}
100%{变换：旋转（-180度）；z索引：4；}
}
@关键帧p-4-右{
0%{变换：旋转（-180度）；z索引：4；}
49%{z-指数：4；}
50%{z-指数：5；}
100%{变换：旋转（0度）；z索引：5；}
}
@关键帧p-3-右{
0%{变换：旋转（0度）；z索引：3；}
49%{z-指数：3；}
50%{z-指数：2；}
100%{变换：旋转（-180度）；z索引：2；}
}
@关键帧p-2-右{
0%{变换：旋转（-180度）；z索引：2；}
49%{z-指数：2；}
50%{z-指数：3；}
100%{变换：旋转（0度）；z索引：3；}
}

帕吉纳5
帕吉纳6
帕吉纳3
帕吉纳4
帕吉纳1
帕吉纳2
转到第3页
转到第6页

转到第1页
转到第3页，我认为问题不在于Safari中的z-index。Safari中的问题在于变换：旋转（-Xdeg）和负度数

如果我在第3页和第5页将
-180deg
更改为180度，它在Safari中效果良好


*{
框大小：边框框；
}
.书{
位置：相对位置；
宽度：200px；
高度：300px；
边框：1px纯黑；
}
.书.页{
位置：绝对位置；
宽度：50%；
身高：100%；
背景：红色；
边框：1px纯绿色；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
}
.书页：第n个孩子（2n+1）{
左：0；
变换原点：右中心；
变换：旋转（180度）；
}
.书页：第n个孩子（2n）{
右：0；
变换原点：左中心；
变换：旋转（0度）；
}
.book.page.page-no-1.active{
变换：旋转（0度）；
}
.book.page.page-no-2.active{
动画：p-2-左10秒；
z指数：2；
变换：旋转（-180度）；
}
.book.page.page-no-2.no-active{
动画：p-2-右10秒；
z指数：3；
变换：旋转（0度）；
}
.book.page.page-no-3.active{
动画：p-3-左10秒；
z指数：3；
变换：旋转（0度）；
}
.book.page.page-no-3.no-active{
动画：p-3-右10秒；
z指数：2；
变换：旋转（-180度）；
}
.book.page.page-no-4.active{
动画：p-4-左10秒；
z指数：4；
变换：旋转（-180度）；
}
.book.page.page-no-4.no-active{
动画：p-4-右10秒；
z指数：2；
变换：旋转（0度）；
}
.book.page.page-no-5.active{
动画：p-5-左10秒；
z指数：5；
变换：旋转（0度）；
}
.book.page.page-no-5.no-active{
动画：p-5-右10秒；
z指数：4；
变换：旋转（-180度）；
}
@关键帧p-5-左{
0%{变换：旋转（180度）；z索引：4；}
49%{z-指数：4；}
50%{z-指数：5；}
100%{变换：旋转（0度）；z索引：5；}
}
@关键帧p-4-左{
0%{变换：旋转（0度）；z索引：5；}
49%{z-指数：5；}
50%{z-指数：4；}
100%{变换：旋转（-180度）；z索引：4；}
}
@关键帧p-3-左{
0%{变换：旋转（180度）；z索引：2；}
49%{z-指数：2；}
50%{z-指数：3；}
100%{变换：旋转（0度）；z索引：3；}
}
@关键帧p-2-左{
0%{变换：旋转（0度）；z索引：3；}
49%{z-指数：3；}
50%{z-指数：2；}
100%{变换：旋转（-180度）；z索引：2；}
}
@关键帧p-5-右{
0%{变换：旋转（0度）；z索引：5；}
49%{z-指数：5；}
50%{z-指数：4；}
100%{变换：旋转（180度）；z索引：4；}
}
@关键帧p-4-ri