CSS3: transformations et transitions

Hello world !

Si vous réalisez des sites webs vous avez forcement entendu parlé de css (si ce n'est pas le cas il est temps de vous y mettre) qui permet de gérer des feuilles de style. Cela permet non seulement d'alléger le code, par conséquent faciliter la maintenance et accélérer un poil la navigation avec la mise en cache des feuilles. A moins que vous ne viviez dans une caverne ces derniers temps vous avez également à coup sur entendu parlé de css3.

Comme vous pouvez le voir sur le site du w3c le troisième niveau de css est encore en "working draft" (tout comme css 2.1 d'ailleurs). C'est à dire que les préconisations du w3c peuvent encore changées cependant certaines modules sont déjà bien avancés et les navigateurs actuels commencent à implémenter certaines fonctions. Prenons exemple sur la propriété "border-radius" qui permettra de créer des coins arrondis sans images qui est déjà disponible dans le navigateur opera (version 10.6) ainsi que sous firefox et les navigateurs basé sur webkit moyennant le préfixe -moz- et -webkit-, notons également que border-radius fonctionne sur la 2ieme "Platform Preview" d'IE9.

Certes css3 va apporter énormément de souplesse pour les web-designers notamment dans la gestion des bordures, polices, bakcgrounds grâce aux nouveaux sélecteurs et nouvelles propriétés mais aujourd'hui je veux revenir sur 2 thèmes dont on parle un peu moins sur le net, qui sont en tout cas moins documentés à l'heure actuelle: les transformations et transitions mais qui à mes yeux sont une petite révolution.

Les transitions:

Je ne vais pas trop m'attarder sur les transitions car un excellent article sur alsacréation explique très bien le principe, je vous encourage donc à lire transitions CSS 3. Sachez simplement que les transitions permettent d'animer une page tout en se passant de javascript, en effet elles permettent de passer d'un état à un autre progressivement. Pour cela on utilise un déclencheur classique css tel :hover par exemple et on défini la durée de l'animation et les propriétés à animer.

On peut par exemple imaginer changer la couleur d'un lien, modifier la couleur de fond, modifier des dimensions et tout cela progressivement. Les transitions sont d'autant plus intéressante qu'on a la possibilité de les coupler avec des transformations.

Les transformations:

Comme l'explique la feuille de travail du w3c la propriété "transform" de css3 permet d'appliquer des transformations 2d ou 3d via des fonctions prédéfinies. Ces fonctions permettent de manipuler des matrices (voir la vidéo ci-dessous), effectuer des translations, rotations etc.



Alors tout ça c'est bien beau mais comment est-ce que ça marche? Je ne vais pas m'attarder sur les considérations purement mathématique permettant la réalisation d'éléments en 3d par contre nous allons voir comment faire une rotation. Vous allez vous apercevoir qu'avec 2 lignes il est possible d'animer une image et qu'en plus c'est super simple!

La rotation: Nous voulons que l'image tourne au survol de la sourie pour cela nous allons utiliser dans notre feuille de style:

img.monimage:hover{transform: rotate(-9deg);}

Pour que cela fonctionne avec tous les navigateurs actuellement il faut penser à rajouter les préfixes -moz et -webkit ce qui donne (vous pouvez essayer avec d'autres valeurs mais également tester d'autres fonctions):

img.monimage:hover{
-moz-transform: rotate(-9deg);
-webkit-transform: rotate(-9deg);
-o-transform: rotate(-9deg);
transform: rotate(-9deg);
}


La ou le bousin deviens super intéressant c'est qu'il est possible de jouer les transformations dans des transitions et ainsi d'obtenir des mouvements fluides. On va renseigner dans notre feuille de style la duré de la transition et que nous allons affecter cette transition sur la transformation. Notre code devient donc:

img.monimage{
-moz-transition-duration: 0.5s;-moz-transition-property:-moz-transform;
-webkit-transition-duration: 0.5s;-webkit-transition-property:-webkit-transform;
-o-transition-duration: 0.5s;-o-transition-property:-o-transform;
transition-duration: 0.5s;transition-property:transform;
}

img.monimage:hover{
-moz-transform: rotate(-9deg);
-webkit-transform: rotate(-9deg);
-o-transform: rotate(-9deg);
transform: rotate(-9deg);
}


Vous pouvez voir ce code fonctionner actuellement dans la bannière du site http://www.iceuponfire.net/. Fonctionne avec les dernières versions d'opéra, chrome, firefox 4 beta 3 (dispo uniquement ici).

Tout cela pour vous montrer un très petit aperçu de ce que le couple transformation + transition sera capable de faire ! Les mois à venir seront très excitants pour les développeurs !