web-dev-qa-db-ja.com

変換スケールでぼやけた画像を修正する方法

Transform：scale(1.1);を要素にホバーすると、画像がぼやけてしまいました。このバグを修正するには？

例

enter image description here

htmlcsscss3hoverblurry
16
Viktor Zahov

これを試してください、それは私のためにうまくいきます！

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

TL; DR transform: scaleは実際に元の画像を拡大縮小しているため、ブラウザのレンダリングエンジンに任せてそこに何があるべきかを判断するため、ぼやけた画像になります。試してみる

img {
transform: scale(.9)    
}

img:hover {
transform: scale(1)
}

アーロン・シブラー 質問に答えてくれました

やあみんな-私はちょうどこの謎を経験しました。この例では、「transform：scale（0.7）」などのimg DOWNを変換し、「transform：scale（1.0）」などのホバー上の画像のネイティブサイズに拡大する必要があります。

縮尺値は元の画像の寸法に比例します-画面上の現在の寸法ではないため、縮尺1は常に元の画像の寸法に等しくなります。

ここでこれを使用しました。

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

1
axecopfire