CSS3 : Transformations 2D

Posted in Technologie

La propriété CSS transform permet de manipuler un élément HTML sur les axes X et Y (horizontal et vertical) grâce à des fonctions diverses de transformation graphique. Il est donc possible de modifier l’apparence d’un élément grâce à un ensemble fonctions 2D :

Translation (translate),
Mise à l’échelle (scale),
Rotation (rotate)
Inclinaison (skew)
Matrice de transformation (matrix)

Syntaxe

La syntaxe est simple d’emploi.

transform: function(value);

Il est souvent nécessaire d’utiliser les préfixes vendeurs (-webkit-, -moz-, etc.) devant la propriété transform pour utiliser les transformations 2D sur les versions actuelles et passées de navigateurs. Reportez-vous aux tableaux de compatibilité pour savoir ce qu’il en est des moteurs, et à partir de quelles versions.

Il est également possible d’effectuer des transformations combinées en espaçant les fonctions d’un simple caractère blanc.

transform : function1(value1) function2(value2) function3(value3);

La propriété `transform-origin`

Pour pouvoir appliquer des transformations, nous avons besoin de savoir quel est le point d’origine (d’ancrage) de la transformation. La propriété transform-origin définit ce point d’origine.

La valeur initiale de cette propriété est le centre de l’élément, ce qui équivaut à la notation :

transform-origin: 50% 50%;

Il est possible de changer cette valeur en utilisant un mot-clef de position (top, right, bottom, left) suivi d’une valeur chiffrée dont l’unité peut varier (px, %, etc.)

div 
   transform-origin: top 0 left 0;
   transform: scale(1.25);

Il s’agit là de la syntaxe proposée par le W3C. À l’heure actuelle (2012) aucun navigateur n’implémente cette syntaxe correctement. Cependant, il suffit de supprimer les mots-clefs de position pour obtenir des résultats sur tous les navigateurs récents (toujours à condition d’utiliser les préfixes vendeurs -webkit-,-moz-,-ms-,-o- selon les versions);

%0A