3D变换后的文本模糊

我有一个div，我绕着X轴旋转了角度。 div包含应用旋转时变得模糊的文本。有没有什么办法可以让文本围绕这个轴旋转？我试过translate3d和translateZ“黑客”，但没有成功。3D变换后的文本模糊

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

来源

2014-10-03 jollelj

它似乎是一个常见问题，看看这里http://css-tricks.com/almanac/properties/p/perspective/ – GibboK 2014-10-03 09:43:17

我看着在OS/X上的2个监视器上的小提琴。在我的外接显示器上，它确实很模糊 - 就像我的外部OS/X显示器上的大多数文本一样，在Macbook pro Retina显示器上它是完美的。外观：http://snag.gy/pmJ1W。jpg – 2014-10-07 18:31:03

在我看来，文本获取*呈现*，然后整个呈现的矩形获取透视变换;文本本身不会被重新绘制“透视”。因此，您会在近端获得较胖的像素，并在中心和远端获得混叠伪像。 – usr2564301 2014-10-07 21:25:00

这里是一个解决方法，以使文本少模糊。它并没有使它像素完美，但它更好。测试在Chrome 38 FF 32和IE 11窗口7上。

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

这里既是小提琴的截图（铬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

DEMO

的关键是找到别名和所迷离文本之间的最佳平衡。对于OP示例，0.5给出了很好的结果，但我相信它可以进行优化。

至于建议的John Grivas，你还可以添加一个1px的文字阴影，往往使中部和顶部线条更好的渲染：

text-shadow: 0 0 1px #101010;

DEMO

正如Mary Melody所评论的，某些字体渲染效果比其他字体好，你可以查看这个DEMO与最流行的谷歌字体。

来源

2014-10-08 08:14:56

我的朋友你值得拥有！我为此工作了两三个小时，但我想也许会有另一种方法，所以我没有回答。这实际上是一个你建议的解决方案！只要添加，如果你想你可以给一个像这样的小影子http://jsfiddle.net/csdtesting/fbxc4qLq/。 :) – 2014-10-08 15:48:37

我刚才说这是一个解决方案，我喜欢它。我说过我曾尝试过，但添加了额外的文字阴影：0 0 1px＃101010; 。所有和我upvoted.I想支持你的答案！ – 2014-10-08 16:38:22

当然可以。如果我想出另一个想法，我会告诉你的。但是你先回答，你必须赢得这里！ – 2014-10-08 16:59:11

3D变换后的文本模糊

回答

相关问题