Почему при использовании transform: rotate изображение размывается?

Question

[Dymok]

Есть блок в форме ромба, внутри него иконка. Реализовал с помощью transform: rotate(45deg) прямоугольнику и transform: rotate(-45deg) иконке, но при этом иконка размылась. Как можно пофиксить или сделать по-другому, чтобы не было подобной проблемы?
в примере иконка слева повернута и выглядит размытой, справа всё норм, но она не повернута как нужно

Answer 1

[monochromer]

К элементам с transform применяется субпиксельное сглаживание из-за чего может возникать размытие.
Проще иконку и ромб вынести на разные уровни, чтобы трансформации применялись только к ромбу.

Comments

[Dymok]

Да, решил таким способом, спасибо.