Ich baue eine Website mit einem Wrapperdiv, das gedreht wird ( transform:rotate(10deg) ). Der Text innerhalb des divs rotiert ebenfalls. Ich möchte den Text gerade, also drehe ich ihn zurück ( transform:rotate(-10deg) ). Der Text ist wieder gerade, aber das verursacht unscharfen Text in Chrome (neueste Version, Mac). Ich habe es versucht:
Es hat das Problem nicht gelöst ..
JSFiddle: Ссылка
Das Seltsame ist: Es funktioniert perfekt im Spiel. Aber nicht auf der eigentlichen Website.
Wenn ich in meinem Stil -webkit-backface-visibility: hidden; hinzufüge, wird der verschwommene Text in Safari wieder scharf, aber in Chrome gibt es keinen Unterschied. (Ich glaube fast, dass es in Chrome schlimmer wird) (FF funktioniert gut)
Ich hoffe, jemand kann mir dabei helfen oder mir eine Erklärung geben, was schief läuft.
Dies geschieht in Webkit-Browsern wie Chrome und Safari. Versuchen Sie Folgendes hinzuzufügen:
%Vor%und dir geht es gut.
versuche, hinzuzufügen und zu prüfen, ob das funktioniert (als Hack):
%Vor%Das kann passieren, wenn der Drehpunkt zwischen den Pixeln liegt. Um dies zu vermeiden, können Sie versuchen, den Ursprung ein wenig zu verschieben oder sicherstellen, dass das Element, das gedreht wird, ungerade Dimensionen hat.
Für jeden, der immer noch auf dieses Problem stößt, obwohl er die vorherigen Vorschläge ausprobiert hat:
Ich habe festgestellt, dass das Problem vollständig behoben wird, wenn Sie die Eigenschaft perspective auf das übergeordnete Element setzen, das gedreht wird. Der Wert kann alles über 0 sein, vorausgesetzt, Sie verwenden keine 3D-Transformationen.
Beispiel CSS:
%Vor%Tags und Links css google-chrome text transform rotation