Поддерживается всеми современными браузерами (с префиксами)

 и допускает изящную деградацию, к примеру:#myelement { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }Хорошая штука. Однако вращается элемент целиком — его содержимое, границы и фоновая картинка. Что делать, если вы желаете повернуть только фоновое изображение? Или чтобы фон остался на месте, а элемент поворачивался?

В настоящее время у W3C нет предложений по трансформации фонового изображения. Это было бы невероятно полезно, поэтому подозреваю, нечто появится в конце концов, но не поможет разработчикам, которые хотят использовать подобные эффекты сегодня.

К счастью, есть решение. В сущности, это хак, который добавляет фоновое изображение к псевдо-элементу :before или :after, а не к родительскому контейнеру. Псевдо-элемент может трансформироваться независимо.

Трансформация только фона

У контейнера может не быть никаких стилей, но необходимо задать position: relative, поскольку наш псевдо-элемент располагается внутри. Также установите overflow: hidden, в противном случае фон будет выходить за пределы контейнера.

#myelement {
 position: relative;
 overflow: hidden;
}

Теперь мы можем создать абсолютно позиционированный псевдо-элемент с трансформируемым фоном. Свойство z-index задаём как -1, это гарантирует что фон появится под содержимым контейнера.

#myelement:before {
 content: "";
 position: absolute;
 width: 200%;
 height: 200%;
 top: -50%;
 left: -50%;
 z-index: -1;
 background: url(background.png) 0 0 repeat;
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 transform: rotate(30deg);
}

Обратите внимание, что вам, возможно, потребуется настроить ширину псевдо-элемента, его высоту и положение. К примеру, если вы используете повторяющееся изображение, область поворота должна быть больше самого контейнера, чтобы полностью вместить фон.

Фиксация фона у трансформируемых элементов

Любые трансформации родительского контейнера применяются и к псевдоэлементам. Так что нам надо отменить трансформацию, например, если контейнер поворачивается на 30 градусов, фон должен повернуться на -30 градусов, чтобы он оказался в фиксированном положении:

#myelement {
 position: relative;
 overflow: hidden;
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 transform: rotate(30deg);
}
#myelement:before {
 content: "";
 position: absolute;
 width: 200%;
 height: 200%;
 top: -50%;
 left: -50%;
 z-index: -1;
 background: url(background.png) 0 0 repeat;
 -webkit-transform: rotate(-30deg);
 -moz-transform: rotate(-30deg);
 -ms-transform: rotate(-30deg);
 -o-transform: rotate(-30deg);
 transform: rotate(-30deg);
}

Опять же, необходимо настроить размер и положение чтобы фон адекватно вписывался в родительский контейнер.

Полный код хранится внутри HTML. Эффект работает в IE9, Firefox, Chrome, Safari и Opera. IE8 не покажет никаких трансформаций, но фон появится.

IE6 и 7 не поддерживает псевдо-элементы, поэтому фон исчезнет. Однако, если вы хотите поддерживать эти браузеры, можно добавить фоновое изображение к контейнеру, а затем установить его как none с помощью современных селекторов или через условные комментарии.

Пожалуйста, посмотрите демонстрационную страницyдля примера.