Question

当鼠标悬停在图像或文本上时，我希望能够隐藏TEXT1，TEXT2，TEXT3等。我已经设法通过添加Chrome来做到这一点 transform-style：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;
 }

你可以帮我解决这个问题吗？

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问题

1 个答案: