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 lorsque vous souhaitez vraiment 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.

Cet article a été mis à jour en 2020 .

Mise à l'échelle , l'inclinaison et la rotation de n'importe quel élément sont possibles avec la propriété CSS3 transform . Il est pris en charge dans tous les navigateurs modernes sans préfixe de fournisseur.

 #myelement {
  transformer: tourner (30 degrés);
}

Des trucs formidables. Cependant, cela fait pivoter l'élément entier – 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 si vous voulez que l'arrière-plan reste fixe pendant la rotation du contenu?

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

Une option serait de créer une nouvelle image d'arrière-plan à partir de l'original, disons tournée de 45 degrés . Ceci peut être réalisé en utilisant:

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

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

Heureusement, il existe une solution basée sur CSS. En gros, c'est un hack qui applique l'image d'arrière-plan à un pseudo-élément :: avant ou :: après plutôt qu'au conteneur parent. Le pseudo-élément peut ensuite être transformé indépendamment du contenu.

Transformation de 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'élément sera positionné à l'intérieur. Vous devez également définir overflow: hidden à moins que vous ne soyez heureux que l'arrière-plan déborde au-delà des limites 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é. Le z-index est défini sur -1 pour garantir 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éter;
  transformer: tourner (30 degrés);
}

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.

Fixation de l'arrière-plan sur un élément transformé

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

 #myelement {
  position: relative;
  débordement caché;
  transformer: tourner (30 degrés);
}

#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éter;
  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 en direct sur CodePen:

Voir le Pen
Transformations CSS3 en arrière-plan Les images de SitePoint ( @SitePoint )
sur CodePen .

Les effets fonctionnent dans tous les principaux navigateurs et Internet Explorer jusqu'à la version 9. Les navigateurs plus anciens sont peu probables

Craig est un consultant Web britannique indépendant qui a construit sa première page pour IE2.0 en 1995. Depuis ce temps, il préconise les normes, l'accessibilité et les meilleures techniques HTML5. Il a créé des spécifications d'entreprise, des sites Web et des applications en ligne pour des entreprises et des organisations, notamment le Parlement britannique, le Parlement européen, le ministère de l'Énergie et du Changement climatique, Microsoft, etc. Il a écrit plus de 1 000 articles pour SitePoint et vous pouvez le trouver @craigbuckler .