3D变换后文字模糊

Question

我有一个div，我用透视图围绕X轴旋转。 div包含在应用旋转时变得模糊的文本。有没有办法让文本围绕此轴旋转？我已经尝试过translate3d和translateZ＆＃34; hack＆＃34;但没有成功。

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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评论的那样，某些字体比其他字体效果更好，您可以使用最流行的Google字体检查 DEMO 。