Переворачивание фото с помощью CSS

[rocknroll]

Здравствуйте.

При переворачивание фото через CSS картинка теряет качество, исчезает резкость и становится размытой, это актуально только для 90 и 270 градусов.

При этом изображение появляется поверх всего, контейнер в котором она установлена не масштабируется под новую высоту и ширину изображения.

Как это можно решить?

.r_90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

Edited June 13, 2013 by rocknroll

[rocknroll]

Причина плохого качества решается с помощью внедрения картинки внутри блока, размер которого должен быть чуть больше.

Крутить в данном случае нужно сам блок.

[rocknroll]

Причина плохого качества решается с помощью внедрения картинки внутри блока, размер которого должен быть чуть больше.

Крутить в данном случае нужно сам блок.

Плохое качество наблюдается только если фото имеет нечетную ширину или высоту.

Сам блок должен быть на пиксель шире и/или длине.

Вторая решается через JS, меняя высоту или длину под новую высоту вложенного блока.