Html CSS翻转动画在Safari中不起作用

基于，我在正在开发的web应用程序的页面上实现了翻转动画。 起初，我使用了blogpost顶部显示的CSS类，但不幸的是，这在IE10中不起作用，因此我开始使用作为解决方案提出的CSS类，以使其在blogpost末尾显示的IE10中工作

在这篇文章中，我极大地简化了示例，但我的代码如下所示

HTML:

此代码在Chrome和Edge中都能完美工作。在IE10上，它可以工作，但没有翻转动画。它只是在不翻转的情况下切换前俯仰和后俯仰，但仍然可以。 然而，在Safari（MacOSX和iPhone上）中，它不能正常工作。 两个div彼此相邻始终可见（后面的div被镜像）

有人知道我如何在IE10以及MacOSX和iPhone上的Safari中使用此功能吗

---

可以在此处找到并执行代码片段：

您需要根据为Safari添加前缀

backface visibility

，即使是在编写本文时的最新版本9.1也是如此

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

document.getElementById（“myBtn”）.addEventListener（“单击”，函数（）{
document.querySelector（“#flipFrame”）.classList.toggle（“悬停”）
});
/*整个容器，保持透视*/
.翻转容器{
-webkit透视图：1000；
前景：1 000；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
}
/*更新！悬停时翻转窗格*/
.flip-container.hover.back{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
.翻转容器.悬停.前部{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
.翻转容器，
.前线，
.回来{
宽度：320px；
高度：480px；
}
/*翻转速度在这里*/
.鳍状肢{
-webkit转换：0.6s；
过渡：0.6s；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
位置：相对位置；
}
/*交换期间隐藏窗格的背面*/
.前线，
.回来{
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-webkit转换：0.6s；
过渡：0.6s；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
位置：绝对位置；
排名：0；
左：0；
}
/*更新！前窗格，置于后上方*/
.前线{
z指数：2；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
/*背面，最初隐藏的窗格*/
.回来{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}

封面内容


从这里开始
背景内容

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */
.flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);    
}
.flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);       
}

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);    
}

/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);  
}

-webkit-backface-visibility: hidden;
backface-visibility: hidden;