Yes You Web !

Publié le 23 février 2019

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 CSS3. Nous allons voir les effets suivants :

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

Grâce à la rotation, nous allons pouvoir faire tourner nos images, par exemple au survol de la souris. Essayez donc !
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, Faire des transitions avec les CSS3. Voici le code que vous pouvez utiliser.

Yes You Web !

Code HTML

Copier

Code CSS

Copier

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 !

Code CSS

Copier

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

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 dézoom, toujours au survol de la souris (pas de panique, il ne mord pas).

Yes You Web !

Code HTML

Copier

Code CSS

Copier

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

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

Yes You Web !

Code CSS

Copier

Inclinaison

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) :

Yes You Web !

Code HTML

Copier

Code CSS

Copier

Translation

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 !

Code HTML

Copier

Code CSS

Copier

Matrice de transformation

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 aime 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 !

Code HTML

Copier

Code CSS

Copier

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 vous souhaitez apprendre à faire des transitions, lisez notre article : Faire des transitions en CSS3.
Si vous souhaitez créer des animations, lisez Créer des animations en CSS3.
Si vous souhaitez aller plus loin ds les transformations avec les transformations 3D, lisez notre article : Créer des transformations 3D en css3.

Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !