CSS 转换问题答案

【问题标题】：CSS Transform IssueCSS 转换问题
【发布时间】：2021-01-08 22:08:43
【问题描述】：

我在 Firefox 中遇到了最奇怪的问题。当我点击翻转底部的一张卡片时，我在 Firefox 中只看到一半的背面。 Safari 和 Chrome 都不错，就是 Firefox。

非常感谢任何帮助！

https://www.cbnew.whitehotstaging.com/

.back {
   font-family: 'Noto Sans', sans-serif;
    -webkit-transform: rotateY(180.1deg);
    -moz-transform: rotateY(180.1deg);
     -ms-transform: rotateY(180.1deg);
     -o-transform: rotateY(180.1deg);
    transform: rotateY(180.1deg);
     text-align: center;
    color: #FFF;
    padding: 50px 60px 0px 60px;
    width: 100%;
    }

【问题讨论】：

将 transform: rotateY(180.1deg); 更改为 transform: translate3d(0,0,0) rotateY(180.1deg); 并查看是否有任何变化。这会迫使浏览器使用更好的图形引擎来渲染元素。
请编辑您的问题，以便无需点击链接即可获得信息

标签： html jquery css firefox

【解决方案1】：

尝试将backface-visibility: hidden 添加到.filpper div。

【讨论】：