转换在Firefox中创建波浪文本

Question

伙计们，我在div上有文字，有变换：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的东西有什么意义？它们迫使浏览器以复杂的方式而不是简单的方式做事，并解决 - 优化结果。