Text verschwommen nach 3D-Transformation

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.Text verschwommen nach 3D-Transformation

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

Quelle

2014-10-03 jollelj

es scheint ein häufiges Problem, schau hier http://css-tricks.com/almanac/properties/p/perspective/ – GibboK

Ich schaue auf die Fiddle auf 2 Monitore, auf OS/X. Auf meinem externen Monitor ist es tatsächlich verschwommen - wie die meisten Texte auf meinem externen OS/X-Monitor, auf dem MacBook Pro Retina-Monitor ist es perfekt .. siehe: http://snag.gy/pmJ1W.jpg –

Es scheint mir der Text wird * gerendert * und dann das gesamte gerenderte Rechteck bekommt eine Perspektive transformieren; der Text selbst wird nicht "perspektivisch" neu gezeichnet. Daher erhalten Sie fettere Pixel am nahen Ende und Aliasing-Artefakte in der Mitte und am fernen Ende. – usr2564301

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:

Less blurry text with 3D transform

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:

Aliased text after 3d transform and a 0.1 scale ratio

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.

Quelle

2014-10-08 08:14:56

Mein Freund du verdienst es! .Ich arbeitete zwei-drei Stunden dafür, aber ich dachte, vielleicht gibt es einen anderen Ansatz, so dass ich nicht antwortete. Dies ist tatsächlich eine Lösung, die Sie beraten! Und nur hinzufügen, wenn Sie möchten, können Sie einen Schatten wie folgt http://jsfiddle.net/csdtesting/fbxc4qLq/ geben. :) –

Ich sagte nur, dass dies eine Lösung ist und mir gefallen hat. Ich sagte, ich habe das gleiche versucht, aber einen zusätzlichen Text-Schatten hinzugefügt: 0 0 1px # 101010; .Thats alle und ich upvoted.Ich will deine Antwort unterstützen! –

Natürlich können Sie. Wenn ich einen anderen Gedanken habe, werde ich es dir sagen. Aber du hast zuerst geantwortet und du musst hier gewinnen! –

Text verschwommen nach 3D-Transformation

Antwort

Verwandte Themen