Почему после transform: rotate будто размытий получился контент: фото, текст, бордеры и т.д.?

Question

[Василь Бойко]

Почему после transform: rotate будто размытий получился контент: фото, текст, бордеры и т.д.?

вот ссылка на верстку mazda
структура верстки такова:
.section-1>.wrapper

.section-1{
    transform: rotate(-1deg);
}
.wrapper{
    transform: rotate(1deg);
}

Answer 1

[Сергей Тутуков]

.section-10 .wrapper{
     will-change: transform;
}

Answer 2

[Александр Борисович]

Потому что так работает субпиксельное сглаживание, на ретине откройте и все у вас пройдет)

Answer 3

[Школьник.]

Потому что это трансформ, он тупо растягивает объект, меняйте размер напрямую.

Comments

[Василь Бойко]

я использовал transfrom не для изменения размера, а для скошенных углов блока.
а в этом примере всё отлично pcvector.net/uploads/demo/scripts/layout_and_inter...
не вижу разницы.

Answer 4

[hotkg]

Искал подобное решение. Помогло изменения размера текста, с точкой. font-size: 15.1px

Answer 5

[SamFlin]

Знаю вопрос давнишний, тоже ничего не помогало, значение scale решает этот баг.