Safari - CSS变换3D旋转故障

Question

我有一个嵌套在容器

中的

。内部

的HTML只由一个字符组成，我正在尝试使用180度3D旋转使

翻转。该效果在所有浏览器上都可以正常显示，但在Safari上无法正常工作。 在Safari中，当内部

被旋转时，只有字符的一半被呈现出来，就像被分成了一半。这并不完全是闪烁，就像字符的一半消失在了一个不存在的平面后面。 根据其他关于同一主题的答案，我在我的代码中应用了backface-visibilty:hidden和transform-style:preserve-3d规则，但仍然没有效果。

.inner{
    height: 80%;
    width: 80%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    font-family: Arial;
    font-size: 5em;
    font-weight: bolder;
    color: #7CC7EE;
    -ms-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
    -ms-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -ms-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}

.flip{
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -transform: rotateY(180deg);
}

我通过js添加或删除.flip类来触发过渡效果。这是我目前处理的稍微简化的情况：https://jsfiddle.net/sb4usrs1/5/ 如果您单击一个div，您会看到它的过渡效果会被很好地呈现出来，但下面的div会闪烁-也许这是指向原因的线索？在我的实际情况中，我有几个div同时翻转，所以比这个更加明显和令人困惑。

- Uknowho

---

你能展示一下HTML吗？最好能创建一个代码片段的例子。 - mhatch

我添加了一个带有描述的小例子，请希望能有所帮助... - Uknowho

Answer 1

显然，旋转的div与父div的平面相交存在问题。这个答案：Bug in CSS3 rotateY transition on Safari?解释了这个问题。我通过将翻转的div的z-index设置为1来解决了这个问题。

- Uknowho