Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

css - Text blurry after 3D transform

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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 :

Less blurry text with 3D transform

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 :

Aliased text after 3d transform and a 0.1 scale ratio

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...