如何使用 css 保存 3d - firefox 问题答案

【问题标题】：How to preserve-3d using css - firefox issue如何使用 css 保存 3d - firefox 问题
【发布时间】：2017-06-04 11:52:30
【问题描述】：

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

我与您分享的链接在 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 中的这个问题吗？

【问题讨论】：

你用的是什么版本的火狐？

标签： html css firefox preserve

【解决方案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。您可以自行解决问题，或者更快地获得答案。

【讨论】：

非常感谢您的帮助！
@NaTHAN 欢迎您！如果有效，请接受答案。