3D 变换后文字模糊

Question

我有一个 div，我用透视图围绕 X 轴旋转。 div 包含在应用旋转时变得模糊的文本。有什么方法可以让文字在围绕这个轴旋转时变得清晰？我已经尝试过 translate3d 和 translateZ “hack”，但没有成功。

.tilt {
    margin: 0 auto;
    width: 300px;
    height: 400px;
    border: 1px solid #222;

    -webkit-transform: perspective(500px) rotateX(35deg);
       -moz-transform: perspective(500px) rotateX(35deg);
            transform: perspective(500px) rotateX(35deg);
}

<div class="tilt">    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores deleniti expedita nostrum ipsam culpa rem earum recusandae saepe nulla repudiandae molestiae natus consectetur neque quasi quos laudantium doloribus iusto minima!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita id magnam labore doloribus velit quidem exercitationem aspernatur nobis dolore omnis deserunt culpa quibusdam nemo adipisci possimus nesciunt debitis minus ullam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis commodi assumenda sed natus eligendi! Temporibus nobis molestiae aperiam ut repudiandae doloribus eveniet quod illo. Natus reiciendis eum ab itaque enim!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet fuga recusandae quisquam voluptatibus qui ipsa pariatur dolor libero cumque quod iste error porro laborum. Non quam quidem tempora corporis veniam!</div>

Answer 1

这是一种使文本不那么模糊的解决方法。它不会使其像素完美，但它更好。在 chrome 38 FF 32 和 IE 11 windows 7 上测试。

重点是使用font-size 将文本放大（x2）（在示例小提琴中，我还缩放了容器的宽度/高度）并使用transform: scale(0.5); 将其缩小。文本呈现的模糊度低于 1:1 默认缩放比例。

这是两个小提琴的屏幕截图（chrome 38）：

还有一个DEMO

CSS：

.tilt {
    margin: -200px auto 0;
    width: 600px;
    height:800px;
    font-size:2em;
    border: 2px solid #222;


    -webkit-transform: perspective(500px) rotateX(35deg) scale(0.5);
       -moz-transform: perspective(500px) rotateX(35deg) scale(0.5);
            transform: perspective(500px) rotateX(35deg) scale(0.5);
}

---

比例优化：

当文本具有默认缩放比例时，我们可以在原始 OP fiddle 中看到它是模糊的。当您以 0.1 比例缩放文本时，文本会出现像素渲染错误：

DEMO

关键是要在混叠文本和模糊文本之间找到最佳折衷。对于 OP 示例，0.5 给出了一个很好的结果，但我相信它可以被优化。

---

根据John Grivas 的建议，您还可以添加一个 1px 的文本阴影，这会使中间和顶部的线条渲染得更好：

text-shadow: 0 0 1px #101010;

DEMO

---

正如Mary Melody 所评论的，某些字体的渲染效果比其他字体更好，您可以使用最流行的谷歌字体查看此DEMO。