La spécification

Elle définit des transformations en 2 et 3 dimensions. Elle transpose en CSS un certain nombre de fonctionnalités disponibles en SVG.

Les transformations n'affectent pas le flux, c'est à dire que les éléments alentours ne seront pas déplacés après la modification, par exemple si l'élément occupe plus de place qu'avant la transformation. La propriété overflow déterminera le rendu dans ce cas. Un objet auquel s'applique une transformation influence le positionnement de ses enfants comme s'il était en position:relative.

La spécification propose un certain nombre de nouvelles propriétés et de fonctions.

Les propriétés

  • transform : elle permet de lister une série de fonctions à appliquer à l'élément;
  • transform-origin : par défaut, les transformations s'effectuent dans un référentiel dont l'origine est le coin bas gauche de l'élément. Cette propriété permet de modifier cette origine;
  • transform-style : définit l'affichage des enfants dans le cas de transformations en 3D. La propriété peut valoir flat pour les "applatir" ou preserve-3d, pour simuler des fonctions dans un espace en 3 dimensions;
  • perspective : applique une fonction de transformation de perspective aux enfants de l'élément (et non à l'élément lui-même);
  • perspective-origin : définit les coordonnées d'origine de la mise en perspective;
  • backface-visibility : est-ce que l'arrière de l'élément est visible ? Par exemple, si on utilise ces propriétés et javascript pour faire tourner un cube, selon la valeur de cette propriété le cube sera transparent ou opaque;

Les fonctions

  • matrix et matrix3d permettent de définir une matrice de respectivement 6 ou 16 valeurs pour décrire précisément une transformation en 2 ou 3 dimensions (je vous renvoie à vos cours de maths, que je commence à regretter d'avoir passés à regarder par la fenêtre)
  • translate et translate3d : déplace l'élément dans un référentiel en 2 ou 3 dimensions;
  • translateX, translateY, translateZ : déplace l'élément sur un seul axe;
  • scale et scale3d : redimentionne l'élément;
  • scaleX, scaleY, scaleZ : comme leur nom l'indique;
  • rotate et rotate3d : fait effectuer à l'élément une rotation;
  • rotateX, rotateY, rotateZ se passent de commentaires,
  • skew, skewX et skewY : met en biais ? je ne sais comment traduire, allez jeter un œil à la démo avec un navigateur compatible pour comprendre;
  • perspective : met l'élément en perspective.

Dans le DOM

La spécification ajoute également des objets et des méthodes au DOM:

  • Point : un point, caractérisé par ses coordonnées X et Y;
  • window.convertPointFromPageToNode et window.convertPointFromNodeToPage pour déterminer les coordonnées d'un point par rapport à la fenêtre ou à un nœud;
  • CSSMatrix : une matrice composée de 16 valeurs et des fonctions pour les manipuler: multiply, inverse, translate, scale, rotate, rotateAxisAngle;
  • CSSTransformValue : la valeur retournée par la nouvelle propriété transform de la méthode window.getComputedStyle qui permet de connaître les styles appliqués à un élément. Elle possède une méthode getCSSMatrix() qui retourne une CSSMatrix décrivant l'ensemble des transformations appliquées à l'objet;

Dans Firefox

Keith Schwarz a commencé l'implémentation cette été, et ses patchs viennent d'intégrer les compilations nocturnes (depuis la nuit dernière, à partir de la version 20080914020350), vous pouvez donc commencer à jouer avec :-)

Application pratique

On peut maintenant réaliser ce genre de choses directement en HTML + CSS : Exemple de logo béta avec FF 3.1

(oui, c'est laid, mais c'est la transposition d'un machin que j'ai du intégrer récemment, en image pour le coup. Si le code vous intéresse, voyez la pièce jointe)

Plus intéressant, cela ouvre aussi la porte à la réalisation de calligrammes.

Alors ?

Ce qui m'embête, c'est qu'au regard du W3C, cette spécification n'est même pas encore un brouillon : This module is currently (summer 2008) under consideration for inclusion in the next charter of the CSS working group. (source). Rien ne garantit donc qu'elle deviendra un jour un standard et que tous les navigateurs la supporteront :-S. Mais c'est l'habituel problème de l'innovation qui va plus vite que les normes. Des pans entiers de spécifications en cours de rédaction, comme CSS3 ou HTML5, sont déjà implémentés dans Gecko et Webkit.

Pour ne pas interférer avec la possible future spécification, chaque moteur utilise un espace de nom spécifique pour les propriétés qu'il implémente avant leur validation. Dans webkit, elles s'appelleront -webkit-*, dans gecko -moz-*, etc. Pour faire fonctionner les exemples que je cite plus bas, il faudra donc les adapter au moteur que vous utilisez.

Accessoirement, les développeurs web vont devoir d'urgence revoir les bases de la géométrie dans l'espace (ou demander de l'aide aux flasheurs et flasheuses, plus habitués à cette gymnastique).

Références: