3D变换后文字模糊 [英] Text blurry after 3D transform

问题描述

我有一个div，我已经围绕X轴旋转透视。 div包含应用旋转时变得模糊的文本。有什么办法让文本在围绕这个轴旋转时清晰吗？我尝试了translate3d和translateZhack，但没有成功。

  .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 ear recusandae saepe nulla repudiandae molestiae natus consectetur neque quasi quos lao dantibus 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。借款商品Temporibus nobis molestiae aperiam ut repithandae 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。 < / div>  

解决方案

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

要点是使用 font-size （在示例中，我也缩放了容器的宽度/高度），并使用 transform：scale（0.5）; 缩小。

这两个fiddles的屏幕截图（chrome 38）：

和

关键是找到混叠和模糊文本。对于OP示例，0.5给出了良好的结果，但我确信它可以优化。

---

href =http://stackoverflow.com/questions/26176557/text-blurry-after-3d-transform/26252137#comment-41197196> John Grivas ，您还可以添加1px文字阴影以使中间和顶部行更好地呈现：

  text-shadow：0 0 1px＃101010; 
  

DEMO

---

=http://stackoverflow.com/questions/26176557/text-blurry-after-3d-transform/26252137?noredirect=1#comment41267306_26252137> Mary Melody ，有些字体呈现得比其他字体更好，您可以检查此 DEMO 包含最流行的Google字体。

I have a div that I've rotated around the X-axis with perspective. The div contains text that gets blurry when the rotation is applied. Is there any way to get the text sharp on rotation around this axis? I've tried the translate3d and translateZ "hack" but without success.

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

解决方案

Here is a workaround to make the text less blurry. It doesn't make it pixel perfect but it is better. Tested on chrome 38 FF 32 and IE 11 windows 7.

The point is to scale the text up (x2) with font-size (in the example fiddle I also scaled the width/height of the container) and scale it back down with transform: scale(0.5);. The text is rendered with less blur than the 1:1 default scaling ratio.

Here is a screenshot (chrome 38) of both fiddles :

And a 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);
}

---

Scale ratio optimization :

When the text has the default scale ratio, it is blured as we can see in the original OP fiddle. When you scale the text with a 0.1 ratio the text becomes aliased with pixel rendering bugs :

DEMO

The point is to find the best compromise between aliased and blured text. For the OP example, 0.5 gives a good result but I am sure it can be optimized.

---

As suggested by John Grivas, you can also add a 1px text-shadow that tends to make the middle and top lines render better :

text-shadow: 0 0 1px #101010;

DEMO

---

As commented by Mary Melody, some fonts render better than others, you can check this DEMO with the most popular google fonts.

这篇关于3D变换后文字模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！