html - 转换在 Firefox 中创建波浪文本

Question

伙计们，我在一个 div 上有文本，它有 transform: rotate(3deg)。在 Firefox 中，文本呈波浪形。删除对 div 的转换可修复波纹度。有没有办法让我既有蛋糕也能吃？

HTML:

<div class="card turn-right">
    <div class="card-text">
         <p>Blah. Blah. Blah.</p>
    </div>
</div>

CSS:

.card {
    display: block;
    width: 550px;
    height: 375px;
}
.turn-right {
    -webkit-transform: rotate(3deg);
       -moz-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
         -o-transform: rotate(3deg);
            transform: rotate(3deg);
}

编辑:

附加信息:我必须为此元素使用@font-face。

截图:

Answer 1

尝试添加透视

.turn-right {
    -webkit-transform: perspective(9999px) rotate(3deg);
            transform: perspective(9999px) rotate(3deg);
}

在现代浏览器中不需要 -moz-transform

顺便说一下，webkit 浏览器中也存在同样的错误。

为什么会这样？

我没有真正的答案，因为我没有浏览器的源代码。但我的猜测如下。浏览器有一个非常好的渲染引擎，可以做很多事情，而且做得很好。但是大部分时间做所有这些都是昂贵的(阅读:使浏览器变慢)。所以，大部分时间它都在试图猜测:这真的有必要吗？我真的需要计算 zzzz 中 yyyy 的 xxxx 才能显示吗？

一些错误来自于该猜测不正确，并且省略了必要的微积分。

那么解决方案就是放一些东西让浏览器渲染引擎认为“等等，我真的需要计算一下，这不是简单的情况”。

此行中还有修复程序，例如 translate3d(0,0,0) 或 translateZ(0) 或 backface-visibility hidden 。翻译 0px 有什么意义？他们迫使浏览器以复杂的方式而不是简单的方式做一些事情，并解决——优化结果。