Comment appliquer des transformations CSS3 aux images d’arrière-plan —

Les transformations CSS sont excellentes, mais elles ne s’appliquent pas (encore ?) aux images d’arrière-plan. Cet article présente une solution de contournement pour les cas où vous souhaitez réellement faire pivoter une image d’arrière-plan ou conserver une image d’arrière-plan fixe pendant la rotation de son élément conteneur.

Pour des connaissances CSS plus avancées comme celle-ci, consultez notre livre Maître CSS, 3e édition.

Mise à l’échelle, inclinaison et rotation des éléments

La mise à l’échelle, l’inclinaison et la rotation de n’importe quel élément sont possibles avec le CSS3 transformer la propriété. C’est pris en charge dans tous les navigateurs modernes sans préfixes de fournisseur :

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

Super truc. Cependant, cela fait pivoter l’ensemble de l’élément : son contenu, sa bordure et son image d’arrière-plan. Que faire si vous souhaitez uniquement faire pivoter l’image d’arrière-plan ? Ou que se passe-t-il si vous souhaitez que l’arrière-plan reste fixe pendant la rotation du contenu ?

Il n’y a pas de proposition CSS du W3C pour background-image transformations. Ce serait incroyablement utile, alors peut-être qu’un jour apparaîtra, mais cela n’aide pas les développeurs qui souhaitent utiliser des effets similaires aujourd’hui.

Une option serait de créer une nouvelle image d’arrière-plan à partir de l’original, par exemple en la faisant pivoter de 45 degrés. Ceci pourrait être réalisé en utilisant :

1. un processus de manipulation d’image côté serveur
2. un côté client toile-code de gestion d’image basé sur, ou
3. API fournies par certains services CDN d’hébergement d’images.

Mais tout cela nécessite des efforts, un traitement et des coûts supplémentaires.

Heureusement, il existe une solution basée sur CSS. Essentiellement, c’est un hack qui applique l’image d’arrière-plan à un ::before ou ::after pseudo-élément plutôt que le conteneur parent. Le pseudo élément peut alors être transformé indépendamment du contenu.

Transformer l’arrière-plan uniquement

L’élément conteneur peut avoir n’importe quel style appliqué, mais il doit être défini sur position: relative, puisque notre pseudo élément sera positionné à l’intérieur. Vous devez également définir overflow: hidden à moins que vous ne souhaitiez que l’arrière-plan déborde au-delà des limites du conteneur :

#myelement {
  position: relative;
  overflow: hidden;
}

Nous pouvons maintenant créer un pseudo-élément positionné de manière absolue avec un arrière-plan transformé. Le z-index est réglé sur -1 pour vous assurer qu’il apparaît sous le contenu du conteneur :

#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);
}

Notez que vous devrez peut-être ajuster la largeur, la hauteur et la position du pseudo-élément. Par exemple, si vous utilisez une image répétée, une zone pivotée doit être plus grande que son conteneur pour couvrir entièrement l’arrière-plan.

Fixer l’arrière-plan d’un élément transformé

Toutes les transformations sur le conteneur parent sont appliquées aux pseudo-éléments. Par conséquent, nous devons annuler cette transformation. Par exemple, si le conteneur est pivoté de 30 degrés, l’arrière-plan doit pivoter de -30 degrés pour revenir à sa position d’origine :

#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);
}

Encore une fois, vous devrez ajuster la taille et la position pour vous assurer que l’arrière-plan couvre correctement le conteneur parent.

Voici les démos pertinentes en direct sur CodePen.

Les effets fonctionnent dans tous les principaux navigateurs et dans Internet Explorer jusqu’à la version 9. Il est peu probable que les navigateurs plus anciens affichent des transformations, mais l’arrière-plan devrait toujours apparaître.

FAQ sur la façon de faire pivoter l’image d’arrière-plan CSS

Terminons en examinant quelques questions fréquemment posées sur la rotation des images d’arrière-plan avec CSS.