Transformer des éléments

24.12.2011

Transform

Voici une propriété css3 qui peu renvoyer le javascript aux oubliettes. L'inconvénient? Et bien... c'est du css3 donc compatible seulement avec les versions les plus récentes des navigateurs.

Transform? C'est quoi?

Une propriété qui permet d'appliquer quatre effet assez sympa:

rotation

sélecteur {-webkit-transform: rotate(Xdeg);
-moz-transform: rotate(Xdeg);
-o-transform: rotate(Xdeg);
transform: rotate(Xdeg);}

On parle en degré. Logique non? Remplacez Xdeg par un nombre de degré (positif ou négatif)

redimensionner

sélecteur {-webkit-transform: scale(X);
-moz-transform: scale(X);
-o-transform: scale(X);
transform: scale(X); }

Remplacez X par un chiffre entier ou décimal (/!\ mettre un point, pas une virgule => 1.3 et non 1,3)
1= aucun changement
0= invisible
2=deux fois plus grand

En claire, c'est le coeficient de dilatation
Vous pouvez aussi faire:

sélecteur {-webkit-transform: scale(X, Y);
-moz-transform: scale(X, Y);
-o-transform: scale(X, Y);
transform: scale(X, Y); }

X étant la largeur et Y la hauteur

Incliner

sélecteur{ -webkit-transform: skewXdeg);
-moz-transform: skew(Xdeg);
-o-transform: skew(Xdeg);
transform: skew(Xdeg);}

On parle encore en degré ;)
X incline horizontalement et Y verticalement

Déplacer

sélecteur{ -webkit-transform: translate(Xpx, Ypx);
-moz-transform: translate(Xpx, Ypx);
-o-transform: translate(Xpx, Ypx);
transform: translate(Xpx, Ypx); }

Enfin, le déplacement. On déplace horizontalement de Xpx et verticalement de Ypx ;)

Dans ces exemple, je n'ai utiliser la propriété que sur l'état survolé (:hover) mais vous pouvez très bien l'utiliser comme état permanant ;)