Le langage CSS/Transformation géométrique

Le langage CSS permet de transformer la représentation géométrique des éléments :

  • Translation,
  • Rotation,
  • Changer d'échelle, étirer, réduire,
  • ...

Propriété transformModifier

La propriété transform modifie l'espace de coordonnées utilisé pour la mise en forme visuelle : translation, rotation, homothétie, distortion pour changer la perspective[1]. La valeur est définie comme une séquence de fonction transformant l'espace de coordonnées :

translateX(dx)
Translation horizontale.
translateY(dy)
Translation verticale.
translateZ(dz)
Translation en profondeur.
translate(dx, dy)
Translation horizontale et verticale.
translate3d(dx, dy, dz)
Translation horizontale, verticale et en profondeur[2].
perspective(distance)
Distance d'observation pour la perspective. Une profondeur (Z) plus grande que zéro rapproche l'objet tandis qu'une distance plus petite l'éloigne.
scaleX(sx)
Modifie l'échelle horizontale.
scaleY(sy)
Modifie l'échelle verticale.
scaleZ(sz)
Modifie l'échelle de profondeur.
scale(sx, sy)
Modifie l'échelle horizontale et verticale[3].
scale3d(sx, sy, sz)
Modifie l'échelle horizontale, verticale et de profondeur[4].
rotate(angle)
Tourne la représentation du nombre spécifié dans le sens horaire, autour du point origine (0,0 par défaut).
rotate3d(x, y, z, a)
Tourne la représentation du nombre a spécifié dans le sens horaire autour de l'axe défini par le vecteur (x, y, z) partant du point origine (0,0 par défaut).
skewX(ax)
Inclinaison dans le sens horizontal.
skewY(ay)
Inclinaison dans le sens vertical.
skew(ax, ay)
Inclinaison dans les sens horizontal et vertical[5].
matrice(a, b, c, d, tx, ty)
Définit une matrice de transformation géométrique 2D[6].
matrix(a, b, c, d, tx, ty) est une notation raccourcie, équivalente à matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).
Voir la section Représentation matricielle ci-dessous.
matrice3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Définit une matrice de transformation géométrique 3D[7].
Voir la section Représentation matricielle ci-dessous.

Exemple 1Modifier

transform: translateX(10px) rotate(10deg) translateY(5px);

Avant transformation

P

Après transformation

P

Exemple 2Modifier

transform: scale(3.0, 0.5);

Avant transformation

P

Après transformation

P

Exemple 3Modifier

transform: skew(15deg, 5deg);

Avant transformation

P

Après transformation

P

Exemple 4Modifier

transform: perspective(500px) rotate3d(1,0,0,65deg);

Avant transformation

Cet effet rappelle la présentation en introduction d'une certaine saga intergalactique...

Après transformation

Cet effet rappelle la présentation en introduction d'une certaine saga intergalactique...

Représentation matricielleModifier

Toutes les fonctions de transformation géométrique 2D et 3D sont représentables par une matrice de transformation. L'application de plusieurs transformations successives peut se résumer à une seule matrice appliquées aux coordonnées de la représentation géométrique.

Matrice 2DModifier

En 2D, les coordonnées (x,y) d'un point peuvent être représentées par une matrice :  

Le nouveau point est calculé en multipliant la matrice du point originale par la matrice de transformation. La constante 1 dans la matrice des points est utilisée lors de la multiplication matricielle comme coefficient pour le vecteur de translation.

La matrice créée par matrice(a, b, c, d, tx, ty) est :  

La dernière ligne contient toujours (0, 0, 1) afin que la multiplication matricielle génère la constante 1 dans la matrice des coordonnées du point résultant.

Le nouveau point est calculé en multipliant la matrice du point originale par la matrice de transformation :

 
 

Chaque transformation géométrique correspond à une matrice.

Fonction de transformation Matrice équivalente
matrice(a, b, c, d, tx, ty)  
translate(tx, ty)  
scale(sx, sy)  
rotate(a)  
skew(ax, ay)  

Une séquence de transformations correspond à la matrice résultant de la multiplication des matrices correspondantes.

Matrice 3DModifier

En 3D, les coordonnées (x,y,z) d'un point peuvent également être représentées par une matrice :  

La matrice créée par matrice3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) comporte 16 coefficients :  

La matrice 3D équivalente à celle créée par matrice(a, b, c, d, tx, ty) est :  

Les constantes dans les troisièmes colonne et ligne de matrice permettent de préserver la coordonnée Z qui reste donc inchangée par une matrice 2D.

Point origineModifier

La rotation se fait par défaut autour du point d'origine de l'élément (0,0). Pour éviter une translation, il est possible de modifier ce point en définissant la propriété transform-origin[8].

La valeur peut être exprimée en pixels, en pourcentage de la taille de l'élément ou par un nom. Il peut y avoir 3 coordonnées pour les rotations 3D.

Exemples :

  • transform-origin: bottom right 60px;
  • transform-origin: 40% 50px;
  • transform-origin: center;
  • transform-origin: top left;

RéférencesModifier