web-dev-qa-db-fra.com

Comment corriger une image floue sur l'échelle de transformation

Lorsque je mets transform: scale(1.1); en survol sur un élément, l’image devient floue. Comment corriger ce bug?

Exemple

 enter image description here

htmlcsscss3hoverblurry
14
Viktor Zahov

Essayez ceci, ça marche bien pour moi!

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 redimensionne en réalité l’image d’origine et, comme vous le laissez au moteur de rendu du navigateur pour déterminer ce qui devrait être fait, vous obtenez une image floue. essayer 

img {
transform: scale(.9)    
}

img:hover {
transform: scale(1)
}

Aaron Sibler a répondu à la question pour moi.

Hé les gars, je viens de vivre cette énigme. Dans votre exemple, vous allez besoin de transformer img DOWN quelque chose comme «transformer: scale (0.7)» et puis redimensionnez aux dimensions natives des images au survol, comme «Transformer: scale (1.0)»

La valeur d’échelle est relative aux dimensions de l’image originale - pas leurs dimensions actuelles à l'écran de sorte qu'une échelle de 1 est toujours égale à la dimensions de l’image originale.

J'ai utilisé cela ici;

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

0
axecopfire