Як застосувати трансформацію CSS3 до фонових зображень

Оригінал: sitepoint.com/css3-transform-background-image

Переклад: Влад Мержевич

Масштабування, нахил і обертання будь-якого елементу можливе за допомогою властивості CSS3 transform. Воно підтримується всіма сучасними браузерами (з префіксами) і дозволяє елегантну деградацію, наприклад:

#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 за допомогою сучасних селекторів або через умовні коментарі.