Safari - CSS 变换 3d 旋转故障答案

【问题标题】：Safari - CSS transform 3d rotation glitchSafari - CSS 变换 3d 旋转故障
【发布时间】：2017-08-21 20:29:22
【问题描述】：

我在容器 div 中有一个 div。内部 div html 由单个字符组成，我试图使 div 翻转 180 度 3d 旋转。该效果在除 Safari 之外的所有浏览器中都能正常工作。在 Safari 上，当内部 div 旋转时，只有一半的字符会被渲染，就像它被分成两半一样。这不是一闪而过，就像一半的角色消失在一架并不存在的飞机后面。根据同一主题的其他答案，我将 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 同时翻转所以它比这更明显和令人困惑。

【问题讨论】：

你能显示 HTML 吗？最好创建一个代码片段示例
我添加了一个带有描述的小提琴，希望对您有所帮助...

标签： css safari 3d rotation visual-glitch

【解决方案1】：

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

【讨论】：