Appliquer des transformations à des images en css3

Appliquer des transformations à des images en css3

Publié le 16 juin 2018

Dans un précédent article, nous vous avions montré comment faire des filtres sur vos images pour en changer la couleur au passage de la souris, sans avoir besoin de charger 2 images, juste grâce aux CSS : appliquer des filtres à des images en css3.

Face au succès de cet article, nous allons aujourd’hui vous montrer d’autres effets très simples grâce aux transformations en CSS 3. Nous allons voir les effets suivants :

  • Rotation (rotate)
  • Mise à l’échelle (scale)
  • Inclinaison (skew)
  • Translation (translate)
  • Matrice de transformation (matrix)

Aujourd’hui, cette propriété CSS est compatible avec tous les navigateurs. Mais si votre cible était équipée de versions plus anciennes, nous vous recommandons de vérifier la compatibilité de cette fonctionnalité avec les navigateurs : can I use css 2D transform

 

Rotation (rotate)

Grâce à la rotation, nous allons pouvoir faire tourner nos images, par exemple au survol de la souris. Essayez donc :

Yes You Web - Transformations css3

Vous voyez que le changement au passage de la souris (chat-souris…) est un peu « violent », on peut ajouter une transition pour le rendre plus progressif. Nous verrons cela dans un prochain article. Voici le code que vous pouvez utiliser.

<div class="rotation">
<img src="/nom-image.jpg">
</div>
Code HTML
.rotation:hover {
  transform: rotate(25deg);
}
Code CSS

Si vous souhaitez afficher l’image par défaut de travers, il vous suffit de retirer le :hover. Si vous souhaitez la faire tourner dans l’autre sens, vous pouvez utiliser un « moins » avant l’angle de rotation. Vous pouvez faire jusque 360 degrés, regardez :

Yes You Web - Transformations css3

 

.rotation:hover {
  transform: rotate(-90deg);
}
Code CSS

On peut aller beaucoup plus loin en utilisant les attributs rotateX, rotateY et rotateZ pour spécifier un axe. Ou même programmer une rotation complète toutes les x secondes, comme si elle tournait continuellement, mais nous allons l’éviter ici, Minou a l’estomac fragile.

 

Mise à l’échelle (scale)

La mise à l’échelle permet de zoomer ou dézoomer sur une image, c’est assez sympa sur un site web. Voyons tout d’abord comme fonctionne le zoom, toujours au survol de la souris (pas de panique, il ne mord pas).

Yes You Web - Transformations css3
<div class="zoom">
<img src="/nom-image.jpg">
</div>
Code HTML
.zoom:hover {
  transform: scale(0.7);
}
Code CSS

Vous pouvez également gérer de manière différente le zoom horizontal et vertical grâce aux fonctions scaleX and scaleY.

Pour le dézoom, c’est la même méthode, mais en utilisant une valeur inférieure à 1.

Yes You Web - Transformations css3
.zoom:hover {
  transform: scale(1.3);
}
Code CSS

 

Inclinaison (skew)

L’inclinaison permet de faire pencher l’image selon l’axe vertical, horizontal ou les 2. Regardons avec cette mouette ce que ça donne (un petit coup de pouce pour l’aider à s’envoler) :

<div class="inclinaison">
<img src="/nom-image.jpg">
</div>
Code HTML
.inclinaison:hover {
  transform: skew(20deg,10deg);
}
Code CSS

 

Translation (translate)

La translation permet de déplacer l’image selon l’axe vertical, horizontal ou les 2. Regardons le résultat en survolant ce caméléon :

Yes You Web - Transformations css3
<div class="translation">
<img src="/nom-image.jpg">
</div>
Code HTML
.translation:hover {
  transform: translate(40px,20px);
}
Code CSS

 

Matrice de transformation (matrix)

Cette matrice permet de regrouper plusieurs fonctions de transformations mais c’est un peu plus complexe que ce qu’on a l’habitude de connaître. Elle est du format matrix(a, b, c, d, tx, ty) qui est une version raccourcie de matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).
a b c d définissent la transformation linéaire. tx ty définissent la translation à appliquer.

Le plus simple est d’utiliser un générateur de matrice : on aimes bien celui là : Matrix generator. Vous renseignez simplement vos attributs comme vu précédemment, puis vous cliquez sur le bouton bleu et cela vous donne le résultat de la matrice :

rotate(45deg) translate(24px,25px) va donner matrix(0.707107, 0.707107, -0.707107, 0.707107, -0.707107, 34.6482)

Un exemple de matrice avec notre minou préféré : une rotation à droite de 90 degrés et une translation de 40px horizontalement et 20px verticalement.

Yes You Web - Transformations css3

 

<div class="matrice">
<img src="/nom-image.jpg">
</div>
Code HTML
.matrice:hover {
  transform: matrix(0.00,1.00,-1.00,0.00,40,20);
}
Code CSS

 

Conclusion

Voilà, nous espérons que cet article vous aura permis d’avoir un 1er aperçu d’autres effets qu’on peut mettre en place sur des images. Si vous en voulez encore plus, dites-le nous en commentaires et on vous en proposera d’autres plus complexes.
Si cet article vous a plu, vous pouvez le partager sur les réseaux sociaux.
Si vous avez des questions, posez-les en commentaires ci-dessous. Et n’hésitez pas à partager vos propres retours d’expérience !

imprimer
Marine LE GUERNIGOU

Marine LE GUERNIGOU

Consultante web freelance, plus de 15 ans d'expérience en webmarketing, mon objectif est de rendre la vie de mes clients plus simple ! Pour chaque problématique étudiée, je partage avec vous le résultat de mon analyse, en espérant que cela vous serve aussi...
Marine LE GUERNIGOU

0 Avis

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.