如何使用 css 保留 3d - firefox 问题

Question

我希望能够在将鼠标悬停在图像或文本上时隐藏 TEXT1、TEXT2、TEXT3 等。我已经在 chrome 中通过添加做到了这一点变换样式：preserve-3d;

我与您分享的 link 在 chrome 中有效，但在 firefox 中无效。

Working Code Link (works in Chrome but not in Firefox)

 #f1_card {
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;

     /** fixes non transitive 3d from parent  and child **/
     transform-style: preserve-3d;
     transition: all 0.5s linear;
     -webkit-border-radius: 200px;
     -moz-border-radius: 200px;
     border-radius: 200px;
 }

你能帮我解决一下 Firefox 中的这个问题吗？

Answer 1

您应该将以下样式添加到您的 css:

.face.front {
  transform: rotateY(0deg);
}

这似乎是一个已知问题。看这里Backface-Visibility Not Working Properly in Firefox (Works in Safari)

这是针对您的示例的修复：

https://jsfiddle.net/tx3uf7ch/9/

这里是重现问题的最少代码：

https://jsfiddle.net/5obugjqa/4/

修复方法如下：

https://jsfiddle.net/5obugjqa/3/

提问时请遵循本指南：How to create a Minimal, Complete, and Verifiable example。而且您要么设法自己解决问题，要么更快地得到答案。

如何使用 css 保留 3d - firefox 问题

How to preserve-3d using css - firefox issue

html

css

firefox

preserve