css - Text blurry after 3D transform

Question

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>

Answer 1

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.