Css 三维翻转动画。。。背面可见性问题

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

（将鼠标悬停在顶部的8WAYRUN徽标上）

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

我有如下CSS（.less）：

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

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

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

在Firefox中，背面可见性仅在普通硬币上隐藏。然而，在抛硬币上，背面显示。。。即使它清楚地尊重隐藏在无唇形硬币中的货币

---

为什么会这样？如何解决此问题？

这是FF中的一个问题，如果添加

transform:translateY（0），可以解决此问题。也不需要
-webkit背面可见性

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

你试过给它加前缀吗<代码>-webkit背面可见性

。当我在FF开发者中进行测试时，它运行良好，或者至少Chrome和FF看起来像sameI尝试过的那样。。。没什么区别。@JasonAxelrod我的回答对你有帮助吗？这是一个奇怪的修正。