Text verschwommen nach 3D-Transformation

Question

Ich habe eine Div, die ich um die X-Achse mit Perspektive gedreht habe. Das div enthält Text, der verschwommen wird, wenn die Drehung angewendet wird. Gibt es eine Möglichkeit, den Text bei der Drehung um diese Achse scharf zu machen? Ich habe den translate3d und translateZ "hack" ausprobiert, aber ohne Erfolg.

.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

ist hier eine Abhilfe der Text weniger verschwommen zu machen. Es macht es nicht Pixel perfekt, aber es ist besser. Getestet auf Chrom 38 FF 32 und IE 11 Windows 7.

Der Punkt ist, den Text nach oben (x2) mit font-size zu skalieren (in der Beispielgeige habe ich auch die Breite/Höhe des Containers skaliert) und skaliere es wieder runter mit transform: scale(0.5);. Der Text wird mit weniger Unschärfe wiedergegeben als das Standard-Skalierungsverhältnis von 1: 1. Hier

ist ein Screenshot (Chrom 38) der beiden Geigen:

Und ein 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); 
} 

---

Maßstab Optimierung:

Wenn der Text den Standardmaßstab hat, ist es blured, wie wir in der ursprünglichen OP fiddle sehen können. Wenn Sie den Text mit einem 0,1-Verhältnis skaliert wird der Text mit Pixeln Rendering Bugs Alias:

DEMO

Der Punkt ist, den besten Kompromiss zwischen aliased und verwischten Text zu finden. Für das OP-Beispiel liefert 0.5 ein gutes Ergebnis, aber ich bin mir sicher, dass es optimiert werden kann.

---

Wie John Grivas vorgeschlagen, können Sie auch einen 1px text-shadow hinzufügen, die die mittlere und obere Linien machen besser zu machen neigt:

text-shadow: 0 0 1px #101010; 

DEMO

---

Wie von Mary Melody kommentiert, einige Schriften rendern besser als andere, können Sie dies überprüfen DEMO mit den beliebtesten Google-Schriftarten.