Textqualität bei "-webkit-transform: rotate" verbessern
Unterer Bereich: Antialiasing mittels "translate3d(0,0,0)" in der Eigenschaft "-webkit-transform: rotate"
Das Problem?
Das Problem bei der ganzen Sache ist, dass standardmäßig kein Antialiasing für mittels rotate() gedrehte Texte aktiviert ist. Das hat zur Folge, dass der Text pixelig und uneben wirkt. Kein Zustand, den man auf einer Website präsentieren kann.
Die Lösung!
Die Lösung ist im Prinzip ganz einfach: dem Wert für "-webkit-transform" muss noch ein weiterer Wert zugewiesen werden, damit das Antialiasing für gedrehte/geneigte Textelemente aktiviert wird. Der Unterschied ist beachtlich!
Der Code zum Kopieren:
/* löst das Problem in aktuellen (Webkit-) Browsern */
.my-rotary-font-container {
-webkit-transform: rotate(-10deg) translate3d(0,0,0);
}
/* falls das allein nicht reicht, hilft zusätzlich oder alternativ "-webkit-backface-visibility: hidden;" */
.my-rotary-font-container {
-webkit-backface-visibility: hidden;
}
