Поддържа се от всички съвременни браузъри (с префикси)
В момента W3C няма предложения за трансформиране на фоновото изображение. Това би било невероятно полезно, така че подозирам, че нещо ще се появи в крайна сметка, но няма да помогне на разработчиците, които искат да използват ефекти като този днес.
За щастие решение има. Това по същество е хак, който добавя фоново изображение към псевдоелемента: преди или след, а не към родителския контейнер. Псевдоелементът може да се трансформира независимо.
Трансформирайте само фона
Контейнерът може да няма никакви стилове, но трябва да е position: relative, защото нашият псевдоелемент е разположен вътре. Също така задайте преливане: скрито, в противен случай фонът ще тече извън контейнера.
Сега можем да създадем абсолютно позициониран псевдоелемент с трансформируем фон. Свойството z-index е зададено на -1, това гарантира, че фонът се появява под съдържанието на контейнера.
Имайте предвид, че може да се наложи да регулирате ширината, височината и позицията на псевдоелемента. Например, ако използвате повтарящо се изображение, зоната на завъртане трябва да е по-голяма от самия контейнер, за да се побере напълно на фона.
Фиксиране на фона на трансформируеми елементи
Всички трансформации в родителския контейнер се отнасят и за псевдоелементите. Така че трябва да отменим трансформацията, например, ако контейнерът е завъртян на 30 градуса, фонът трябва да се завърти -30 градуса, така че да е във фиксирана позиция:
Отново трябва да коригирате размера и позицията, така че фонът да се вписва адекватно в родителския контейнер.
Пълният код се съхранява в HTML. Ефектът работи в IE9, Firefox, Chrome, Safari и Opera. IE8 няма да показва никакви трансформации, но фонът ще се появи.
- Как да направя размяна на изображения при задържане (jQuery), forwww - Блог за уеб разработчици
- Как да направите вашия блог да се откроява сред другите за привличане на читатели - Теми и приставки за Wordpress
- Как да заведа дете от Крим в Украйна - блогът ми BeTeshka
- За Mac OS X - какво и какво, Блог за Mac, iPhone, iPad и други трикове на Apple
- Смяна на стойката на старите лещи Carl Zeiss, БЛОГ НА ДМИТРИЙ ЕВТИФЕЕВ