Question

我在容器div中有一个div。内部div html由一个字符组成，我试图让div翻转180度3d旋转。该效果在所有浏览器中都可正常工作，但Safari。在Safari上，当内部div旋转时，只有一半的角色被渲染，就像它被分成两半一样。它不是一个闪烁，它就像一半的角色消失在一架并不真实存在的飞机后面。根据同一主题的其他答案，我将背面-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在翻转同时，它比这更加明显和混乱。

Answer 1

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

Safari - CSS转换3d旋转故障

1 个答案: