1

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

我与您共享的链接在 chrome 中有效，但在 Firefox 中无效。

工作代码链接（在 Chrome 中有效，但在 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 中的这个问题吗？

4

1 回答 1

1

您应该将以下样式添加到您的 CSS：

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

似乎这是已知问题。请参阅此处的背面可见性在 Firefox 中无法正常工作（在 Safari 中有效）

这是您的示例的修复：

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

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

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

这是修复它：

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

询问时请遵循本指南：如何创建最小、完整和可验证的示例。你要么自己解决问题，要么更快地得到答案。

于 2017-06-04T21:02:33.160 回答