Как исправить размытое изображение в масштабе преобразования

Попробуйте это, это работает отлично для меня!

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

TL; DR transform: scale на самом деле масштабирует исходное изображение, и, поскольку вы оставляете его механизму рендеринга браузера, чтобы выяснить, что там должно быть, вы получаете размытое изображение. пытаться

img {
transform: scale(.9)    
}

img:hover {
transform: scale(1)
}

Аарон Сиблер ответил мне на вопрос.

Я только что испытал эту загадку. В вашем примере вам нужно будет преобразовать img ВНИЗ что-то вроде «transform: scale (0,7)», а затем масштабировать вверх до исходных размеров изображения при наведении, например «transform: scale (1,0)»

Значение масштаба относится к размерам исходного изображения, а не к их текущим размерам на экране, поэтому масштаб 1 всегда равен размерам исходного изображения.

Я использовал это здесь;

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

У меня была эта проблема с масштабированием SVG и размытыми изображениями. Я увеличил фоновое изображение до 4,5, и изображение стало очень размытым при увеличении. Я читал, что сначала можно уменьшить масштаб до transform: scale(0.7), а затем увеличить до transform: scale(1.0). В моем случае это означало огромную перестройку моей анимации. У меня была очень сложная анимация с несколькими масштабами, преобразованиями и т. д.

Я просто оставил все как есть и добавил ширину псевдомасштаба. Затем браузер, кажется, перерисовывает каждый кадр, но поскольку ширина на самом деле не меняется, вы все равно можете использовать transform: scale(x.x) для масштабирования, и вы получите очень четкое изображение.

Может быть, кто-то может подтвердить это. Вот мой код. В моем случае изображение было шириной 86 пикселей и увеличено в 4,5 раза по сравнению с исходным значением.

<div class="overall-scale">
 <div class="image-scale"></div>
</div>

@keyframes overall-scale {
0% {
    transform: scale(1);
}

100% {
    transform: scale(4.5);
}
}

@keyframes image-scale {
0% {
    width: 86px;
}

100% {
    width: 86px;
}
}

Надеюсь, это поможет, и мое объяснение имеет смысл.

Пожалуйста, прокомментируйте, если это не работает для вас.