Comment appliquer des transformations CSS3 aux images d'arrière-plan –

Les transformations CSS sont vraiment cool, mais elles ne s'appliquent pas encore aux images d'arrière-plan. Cet article présente une solution de contournement soignée pour les moments où vous souhaitez vraiment faire pivoter une image d'arrière-plan ou pour conserver une image d'arrière-plan fixe pendant la rotation de son élément conteneur.

Cet article a été mis à jour en 2018 . Intéressé à maîtriser CSS3 comme un pro? CSS Master de Tiffany Brown, est disponible en téléchargement pour tous les membres de SitePoint Premium. Alternativement, vous pouvez récupérer votre copie du livre pour seulement 19 $.

La mise à l'échelle, l'inclinaison et la rotation d'un élément est possible avec la propriété CSS3 transform . C'est supporté dans tous les navigateurs modernes sans préfixes de fournisseurs. (J'ai ajouté dans le -webkit- juste au cas où vous voudriez supporter des navigateurs plus anciens.)

 #myelement {
  -webkit-transform: rotation (30deg);
  transformer: tourner (30deg);
} 

Des trucs géniaux. Cependant, cela fait tourner l'élément entier – son contenu, sa bordure et son image de fond. Que faire si vous souhaitez uniquement faire pivoter l'image d'arrière-plan? Ou si vous voulez que l'arrière-plan reste fixe pendant la rotation de l'élément?

Actuellement, il n'y a pas de proposition du W3C pour les transformations d'image de fond. Ce serait incroyablement utile, donc je soupçonne que l'un d'entre eux finira par apparaître, mais cela n'aide pas les développeurs qui veulent utiliser des effets similaires aujourd'hui.

Heureusement, il existe une solution. Pour l'essentiel, c'est un hack qui applique l'image de fond à un élément pseudo avant ou après plutôt que le conteneur parent. Le pseudo élément peut alors être transformé indépendamment.

Transformer l'arrière-plan seulement

L'élément conteneur peut avoir tous les styles appliqués, mais il doit être positionné sur position: relative puisque notre pseudo-élément sera positionné en son sein. Vous devriez également définir overflow: hidden à moins que vous ne soyez content que l'arrière-plan se répande au-delà du conteneur.

 #myelement {
  position: relative;
  débordement caché;
} 

Nous pouvons maintenant créer un pseudo élément absolument positionné avec un arrière-plan transformé. L'index z est défini sur -1 pour s'assurer qu'il apparaît sous le contenu du conteneur.

 #myelement: before {
  contenu: "";
  position: absolue;
  largeur: 200%;
  hauteur: 200%;
  en haut: -50%;
  gauche: -50%;
  indice z: -1;
  background: url (background.png) 0 0 répète;
  -webkit-transform: rotation (30deg);
  transformer: tourner (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:

Correction de l'arrière-plan sur 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 ex. Si le conteneur est pivoté de 30 degrés, l'arrière-plan doit être pivoté de -30 degrés pour revenir à une position fixe:

 #myelement {
  position: relative;
  débordement caché;
  -webkit-transform: rotation (30deg);
  transformer: tourner (30deg);
}

#myelement: avant {
  contenu: "";
  position: absolue;
  largeur: 200%;
  hauteur: 200%;
  en haut: -50%;
  gauche: -50%;
  indice z: -1;
  background: url (background.png) 0 0 répète;
  -webkit-transform: rotation (-30deg);
  transformer: tourner (-30deg);
} 

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

Voici les démos pertinentes sur CodePen:

Voir le Pen CSS3 Transforms on Images d'arrière-plan par SitePoint ( @SitePoint ) le CodePen .

Les effets fonctionnent dans tous les principaux navigateurs et dans Edge et Internet Explorer à la version 9. IE8 ne sera pas

Craig est un consultant web britannique indépendant qui a construit sa première page pour IE2.0 en 1995. Depuis lors, il préconise les standards, l'accessibilité et les meilleures pratiques HTML5. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler