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

В момента W3C няма предложения за трансформиране на фоновото изображение. Това би било невероятно полезно, така че подозирам, че нещо ще се появи в крайна сметка, но няма да помогне на разработчиците, които искат да използват ефекти като този днес.

За щастие решение има. Това по същество е хак, който добавя фоново изображение към псевдоелемента: преди или след, а не към родителския контейнер. Псевдоелементът може да се трансформира независимо.

Трансформирайте само фона

Контейнерът може да няма никакви стилове, но трябва да е position: relative, защото нашият псевдоелемент е разположен вътре. Също така задайте преливане: скрито, в противен случай фонът ще тече извън контейнера.

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

Имайте предвид, че може да се наложи да регулирате ширината, височината и позицията на псевдоелемента. Например, ако използвате повтарящо се изображение, зоната на завъртане трябва да е по-голяма от самия контейнер, за да се побере напълно на фона.

Фиксиране на фона на трансформируеми елементи

Всички трансформации в родителския контейнер се отнасят и за псевдоелементите. Така че трябва да отменим трансформацията, например, ако контейнерът е завъртян на 30 градуса, фонът трябва да се завърти -30 градуса, така че да е във фиксирана позиция:

Отново трябва да коригирате размера и позицията, така че фонът да се вписва адекватно в родителския контейнер.

Пълният код се съхранява в HTML. Ефектът работи в IE9, Firefox, Chrome, Safari и Opera. IE8 няма да показва никакви трансформации, но фонът ще се появи.