Как да приложим CSS3 трансформация към фонови изображения - 2 май 2013 г. - Блог на конструктора на сайтове - WebDirect

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

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

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

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

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

---