Appliquer des transformations 2D à des images en css3

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.

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 :

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

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.

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

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 :

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.