Как применить CSS3 преобразования к фоновым изображениям

CSS-преобразования хороши, но они (пока?) Не применяются к фоновым изображениям. В этой статье представлен обходной путь для тех случаев, когда вы действительно хотите повернуть фоновое изображение или оставить фиксированное фоновое изображение во время вращения его элемента контейнера.

Эта статья была обновлена ​​в 2020 году .

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

 #myelement {
  transform: rotate(30deg);
}

Отличный материал. Тем не менее, это вращает весь элемент — его содержимое, границы и фоновое изображение. Что если вы хотите повернуть только фоновое изображение? Или что, если вы хотите, чтобы фон оставался фиксированным во время вращения контента?

Там нет предложения W3C CSS для преобразования background-image Это было бы невероятно полезно, так что, возможно, однажды появится, но это не поможет разработчикам, которые хотят использовать подобные эффекты сегодня.

Один из вариантов — создать новое фоновое изображение из оригинала, скажем, повернутое на 45 градусов. Это может быть достигнуто с помощью:

1. процесс манипулирования изображениями на стороне сервера
2. клиентский код обработки изображений на основе canvas или
3. API, предоставляемые некоторыми сервисами CDN для хостинга изображений.

Но все это требует дополнительных усилий, обработки и затрат.

К счастью, есть решение на основе CSS. По сути, это хак, который применяет фоновое изображение к псевдоэлементу ::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;
  transform: rotate(30deg);
}

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

Исправление фона на преобразованном элементе

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

 #myelement {
  position: relative;
  overflow: hidden;
  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;
  transform: rotate(-30deg);
}

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

Вот соответствующие демонстрации в прямом эфире на CodePen: