Le CSS3 permet d’effectuer des transformations comme des translations ou des rotations de n’importe quel élément de la page. D’autre part avec les transitions la page peut devenir et s’animer selon les actions de l’utilisateur dont la plus fréquente est le passage du curseur de la souris. Je vous propose dans cet article d’explorer ces possibilités.

Les transformations

Pour les transformations on a la propriété transform. Ca ne fonctionne qu’avec les éléments de type boîte mais on peut facilement étendre l’action aux autres éléments avec inline-block.

Translation

Une translation est un déplacement horizontal ou vertical ou selon une direction quelconque. On dispose de ces fonctions :

• translateX(n) : translation de n sur l’axe x
• translateY(n) : translation de n sur l’axe y
• translate(x, y) : translation vers le point de coordonnées x et y

Et pour la 3D :

• translateZ(n) : translation de n sur l’axe z
• translate3d(x,y,z) : translation vers le point de coordonnées x, y, z

Voici une représentation de cette translation sur l’axe x (JSFiddle) :

Je pense que c’est simple et intuitif. Vous pouvez jouer avec cette fonction sur cette page. Vous avez aussi cette page identique pour l’axe y.

Pour effectuer une translation vers un point quelconque c’est aussi simple (JSFiddle) :

Ici on effectue une translation de 40px sur l’axe x et de 70 px sur l’axe y. Il existe aussi une page pour jouer avec cette fonction.

Perspective

Si on fait une translation sur l’axe z on ne va rien voir de spécial parce que la vue est en 2D. Pour avoir un effet il faut changer la perspective et il existe une propriété pour ça : perspective. C’est comme si on éloignait l’élément de la vue, du coup on acquiert une profondeur et alors une translation sur l’axe z devient visible (JSFiddle) :

On pourrait éloigner l’objet avec une valeur négative. La perspective doit être précisée dans le parent !

Il est aussi possible de modifier l’origine de la vue avec perspective-origin. On doit préciser les valeurs de x et y (par défaut on a 50% et 50%) :

Vous pouvez jouer avec ces éléments de perspective sur cette page :

Comme ces notions ne sont pas faciles à visualiser je vous conseille les excellentes illustrations du W3C.

Dimensionnement (scale)

Un dimensionnement est un changement de la taille d’un élément. On dispose de ces fonctions :

• scaleX(n) : changement de la dimension de n sur l’axe x
• scaleY(n) : changement de la dimension de n sur l’axe y
• scale(x, y) : changement de la dimension de x et y

Et pour la 3D :

• scaleZ(n) : changement de la dimension de n sur l’axe z
• scale3d(x,y,z) : changement de la dimension de x, y et z

Voici une représentation de cette transformation sur l’axe x (JSFiddle) :

Je pense que c’est simple et intuitif. Vous pouvez jouer avec cette fonction sur cette page. Vous avez aussi cette page identique pour l’axe y.

Pour effectuer une modification de taille simultanément sur les deux axes c’est aussi simple (JSFiddle) :

Il existe aussi une page pour jouer avec cette fonction.

Rotation

Une rotation est une… rotation d’un certain angle autour d’un centre. On dispose de ces fonctions :

• rotateZ(n) : changement de la dimension de n sur l’axe z
• rotate(n) : rotation de n sur l’axe z (équivalent à rotateZ)

Et pour la 3D :

• rotateX(n) : rotation de n sur l’axe x
• rotateY(n) : rotation de n sur l’axe y
• rotate3d(x,y,z, angle) : rotation 3D

Voici une représentation d’une rotation sur l’axe z (JSFiddle) :

Vous pouvez jouer avec cette fonction sur cette page.

Si on utilise l’axe x ou y alors on fait une rotation 3D (JSFiddle) :

Si vous avez du mal à lire (on se demande bien pourquoi !) au dessus on a une rotation sur l’axe x de 160 degrés et au-dessous une rotation sur l’axe y de 15 degrés.

Mais là on est en 2 dimensions et ça reste plat. Pour passer en 3 dimensions il faut ajouter de la perspective, par exemple le cas ci-dessus en mettant un perspective: 150px; dans le contenant donne quelque chose de plus réaliste :

Par défaut l’axe est placé au centre de l’élément. Si on veut changer ce comportement par défaut il faut utiliser la propriété transform-origin. Pour bien visualiser cela rien de tel qu’une démonstration en ligne :

Dommage que le centre de rotation ne soit pas visualisé dans l’animation mais c’est plutôt parlant.

On peut aussi décaler l’origine d’une perspective avec perspective-origin. En reprenant encore le cas ci-dessus avec perspective-origin: 20% 20%; dans le contenant on obtient cet aspect :

Biais (skew)

Le biais (skew) est plus facile à montrer qu’à expliquer donc je ne m’y risque pas !

On dispose de ces fonctions :

• skewX(angle) : déforme sur l’axe x de l’angle
• skewY(angle) : déforme sur l’axe y de l’angle
• skewY(angle x, angle y) : déforme sur les axes y et y

Voici une représentation sur l’axe x et sur l’axe y (JSFiddle) :

Vous pouvez jouer avec cette fonction sur cette page pour l’axe x et celle-ci pour l’axe y.

Voici un exemple avec la fonction skew :

Vous pouvez aussi jouer avec cette fonction sur cette page.

Ressources pour les transformations

On trouve des générateurs :

• CSS transform

• CSS3 Generator

• CSS transform generator

Un avantage de ces générateurs est qu’ils donnent le code avec les préfixes pour les différents navigateurs.

On trouve aussi des tutoriels et documentations :

• les préconisations du W3C
• un superbe tutoriel très complet pour les transformations 3D (regardez les exemples !)

Les transitions

Les transformations c’est bien mais elles trouvent tout leur intérêt dès qu’on les anime. Il n’y a pas si longtemps que ça la seule façon de créer des animations était d’utiliser Javascript. Avec CSS3 ce temps est révolu et on peut faire beaucoup de choses avec seulement des règles CSS.

En gros les transitions permettent de faire changer progressivement les valeurs des propriétés CSS. Par exemple on passe le curseur de la souris au-dessus d’un bouton et celui-ci change progressivement de couleur.

Les transitions sont déclarées en même temps que les règles auxquelles elles se réfèrent. Le navigateur sait ensuite ce qu’il a à faire.

Transition sur une propriété

Prenons un exemple simple de survol. On part d’une boite de 100px par 100px et on veut au survol que la hauteur passe progressivement à 120px. Comment réaliser cela ? On doit :

• déclarer la propriété de départ de façon classique
• déclarer la propriété comme devant être transitionnée avec la durée de l’effet
• déclarer dans la règle finale la nouvelle valeur de la propriété

Ca va être plus clair avec l’exemple !

div {
  width: 100px;
  height: 100px;
  background: blue;
  transition: height 1s;
}
div:hover {
    height: 120px;
}

Au départ on a la boîte de 100px sur 100px, bleue et on déclare qu’on veut une transition sur la hauteur qui doit durer 1 seconde.

Au survol (hover) on définit la hauteur finale de 120px.

Vous avez l’exemple actif en JSFiddle.

Transition sur plusieurs propriétés

On n’est pas limité à une propriété, on pourrait changer par exemple la largeur en même temps que la hauteur :

div {
  width: 100px;
  height: 100px;
  background: blue;
  transition: height 1s, width 2s;
}
div:hover {
    height: 120px;
    width: 80px;
}

Vous avez l’exemple actif en JSFiddle.

Progression de la transition

On peut modifier la transformation avec la propriété transition-timing-function et ces valeurs :

• ease : début rapide, puis ça accélère, puis ça ralentit à la fin (c’est l’effet par défaut)
• linear : même vitesse du début à la fin
• ease-in : début lent
• ease-out : fin lente
• ease-in-out : début et fin lents
• cubic-bezier(n,n,n,n) : là on peut tout définir avec une courbe de Bezier

Vous pouvez tester toutes ces possibilités sur cette page.

En ce qui concerne les courbes de Bezier je vous conseille cet excellent générateur :

On peut ainsi obtenir exactement le comportement qu’on désire ! Je vous ai mis un exemple ici.

Les propriétés

La propriété transition est un raccourci pour les 4 propriétés suivantes :

• transition-property : la ou les propriétés touchées par la transition
• transition-duration : durée de la transition
• transition-timing-function : progression de la transition (par défaut ease)
• transition-delay : délai pour le départ de la transition

Transition d’une transformation

On peut évidemment appliquer une transition sur les transformations qu’on a vues ci-dessus. On pourrait par exemple ajouter une rotation au changement de la largeur vu ci-dessus :

div {
  width: 100px;
  height: 100px;
  background: blue;
  transition: width 2s, transform 2s;
}
div:hover {
    width: 200px;
    transform: rotate(180deg);
}

Vous avez ça en action ici.

Exemples intéressants de transitions

Il est toujours intéressant d’avoir des exemples de réalisations. Je me suis un peu amusé dans cet exemple. Je vous en propose d’autres qui me semblent valoir la visite :

• Une galerie d’effets

• Navigation à onglets fluides avec les transitions CSS

• Une superbe barre de navigation

• Un autre menu élégant

Ressources pour les transitions

Il y a une page MDN très bien faite.

Pour la spécification W3C c’est par ici.

Il y a un bon tutoriel sur Alsacreation.

Et évidemment comme d’habitude il faut des préfixes pour certains navigateurs  mais comme je vous l’ai déjà dit, automatisez cette tâche ! Par exemple avec gulp-autoprefixer.