Question

我在这里的网站上使用CSS3 3D翻转动画：

https://8wayrun.com/forums/ （将鼠标悬停在顶部的8WAYRUN徽标上）

在每个浏览器中，它看起来都很棒……除了Firefox之外。

我的CSS（.less）如下：

        .logo-coin
        {
            position: absolute;
            width: 100%;
            backface-visibility: hidden;

            &.flipped { transform: rotateY(180deg); }
        }

如您所见，背面可见性应隐藏。而且，在除Firefox之外的所有浏览器中。

在Firefox中，背面可见性仅隐藏在普通硬币上。但是，在翻转后的硬币上，背面仍然显示...尽管它清楚地尊重未翻转后的硬币中的隐藏物。

为什么会这样？我该如何解决？

Answer 1

这是FF中的问题，如果在父元素上添加transform: translateY(0);，则可以解决。也不需要-webkit-backface-visibility。

.logo-coin {
    position: absolute;
    width: 100%;
    backface-visibility: hidden;
    transform: translateY(0);
        &.flipped { transform: rotateY(180deg); 
    }
}

3D翻转动画...背面可见性问题

1 个答案: