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上测试.

关键是向上缩放文本(x2)font-size(在示例中小提琴我也缩放容器的宽度/高度)并将其缩小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 小提琴中看到的那样模糊.当您使用0.1比例缩放文本时,文本会出现像素渲染错误的别名:

DEMO

重点是找到别名和模糊文本之间的最佳折衷方案.对于OP示例,0.5给出了良好的结果,但我确信它可以进行优化.

正如John Grivas所建议的那样,你还可以添加一个1px的文本阴影,它可以使中间和顶部线条呈现更好的效果:

text-shadow: 0 0 1px #101010;

DEMO

正如Mary Melody评论的那样,有些字体比其他字体更好,你可以用最流行的谷歌字体来检查这个DEMO.