3D变换后文本模糊

Question

3D变换后文本模糊

12

我有一个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>

- jollelj

似乎是一个常见的问题，请看这里：http://css-tricks.com/almanac/properties/p/perspective/ - GibboK

3

我正在用两台显示器查看OS/X上的小提琴。在我的外部显示器上，它确实有些模糊 - 就像大多数文本一样，实际上是在我的外部OS/X显示器上，而在Macbook Pro Retina显示器上则是完美的...看：http://snag.gy/pmJ1W.jpg - George Katsanos

在我看来，文本似乎被渲染，然后整个渲染的矩形获得了透视变换；文本本身并没有以“透视”方式重新绘制。因此，在近端会出现更粗的像素，在中心和远端会出现走样伪影。 - Jongware

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

这里有一个解决方案，可以使文本模糊度降低。它不能完全达到像素级别的精度，但比原先更好。在chrome 38、FF 32和IE 11 windows 7上测试过。

关键是使用font-size将文本放大（2倍），在示例中还缩放了容器的宽度/高度，并使用transform: scale(0.5);将其缩小回来。相对于1:1的默认缩放比例，文本呈现的模糊度较小。

以下是两个示例的屏幕截图（chrome 38）：

Less blurry text with 3D transform

还有一个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 的比例缩放文本时，文本会出现像素渲染错误并变得不清晰：

Aliased text after 3d transform and a 0.1 scale ratio

演示

重点是找到最佳的抗锯齿和模糊文本之间的折衷方案。对于OP的例子，0.5可以得到良好的结果，但我相信它可以被优化。

正如John Grivas所建议的那样，您还可以添加一个1像素的文本阴影，这有助于使中间和顶部的行呈现更好的效果：

text-shadow: 0 0 1px #101010;

演示

正如玛丽·梅洛迪所评论的那样，有些字体比其他字体更好地呈现，您可以使用最流行的谷歌字体检查此演示。