wake-up-neo.com

Verschwommenes Bild auf Transformationskala fixieren

Wenn ich transform: scale(1.1); auf den Hover eines Elements gesetzt habe, wurde das Bild verschwommen. Wie kann man diesen Fehler beheben?

Beispiel

 enter image description here

htmlcsscss3hoverblurry
14
Viktor Zahov

Probieren Sie es aus, es funktioniert gut für mich!

img {
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}
32
dimitar

TL; DR transform: scale skaliert tatsächlich das Originalbild. Da Sie es dem Render-Modul des Browsers überlassen, um herauszufinden, was dort vorgeht, haben Sie ein verschwommenes Bild. Versuchen 

img {
transform: scale(.9)    
}

img:hover {
transform: scale(1)
}

Aaron Sibler beantwortete die Frage für mich.

Hey Leute, ich habe gerade dieses Rätsel erlebt. In Ihrem Beispiel werden Sie muss img DOWN so etwas wie "transform: scale (0.7)" und .__ umwandeln. Skalieren Sie dann die HUB-Werte der Bilder wie __. "Umwandeln: Maßstab (1,0)"

Der Skalenwert ist relativ zu den Abmessungen des Originalbilds - nicht Ihre aktuellen Abmessungen auf dem Bildschirm, so dass eine Skala von 1 immer der .__ entspricht. Originalabmessungen.

Ich habe das hier benutzt.

http://meetaaronsilber.com/experiments/css3imgpop/index.html

0
axecopfire