Transformation

La propriété CSS transform permet d'effectuer des transformations géométriques sur un élément. Contrairement aux propriétés traditionnelles, elle accepte plusieurs valeurs. Il est même possible d'effectuer des combinaisons afin d'accomplir des transformations complexes.

Comparativement aux autres propriétés, par exemple: top ou left, la propriété transform n'a aucun impact sur le positionnement des éléments adjacents.

translate ↔️

Par défaut, cette valeur accepte un ou deux arguments entre parenthèses. Le 1er correspond à une translation sur les X ↔️ et le 2e, (si présent), sur les Y ↕️. Les arguments peuvent-être n'importe quelle unité de mesure CSS (px, em, %, etc.)

Un translate avec un seul argument déplace l'élément sur les X ↔️.

transform: translate(100%);

Tandis qu'avec deux arguments séparés par une virgule l'élément se déplace sur les X et Y ↘️.

transform: translate(100%, 100%);

Voir l'exemple ci-dessous:

À gauche, transform: translate(100%, 0);
À droite, transform: translate(100%, 100%);

Dans le cadre d'une translation, les % sont relatifs à la dimension de l'élément en question.

  • 100% sur les X = Une largeur de l'élément.
  • 100% sur les Y = Une hauteur de l'élément.

Il est possible d'effectuer une translation sur un seul axe en spécifiant cet axe dans la nom de la valeur. Par exemple:

  • translateX(...) uniquement sur les X (équivaut à translate(...) )
  • translateY(...) uniquement sur les Y
  • translateZ(...) uniquement sur les Z
Pour qu’une translation sur l’axe des Z soit perceptible, il est nécessaire qu’une perspective soit donnée à l’élément ou à l’un de ses parents.

Il est également possible de combiner les 3 axes dans une valeur en utilisant translate3d(...).

transform: translate() rotate

Cette valeur accepte comme argument les unités de type:

  • deg degrés | 360 degrés dans un cercle/li>
  • turn turns | 1 turn/tour dans un cercle

Qui plus est, cette valeur peut-être:

  • Positive pour aller dans le sens horaire des aiguilles d'une montre
  • Négative pour aller dans le sens inverse

Par exemple, une rotation de 45° dans le sens horaire:

Remarquez dans l’exemple précédent comment il est possible de combiner deux valeurs de transformation en les séparant avec un espace.

Il est possible d'effectuer une rotation sur un seul axe en spécifiant cet axe dans la nom de la valeur. Par exemple:

  • rotateZ(...) uniquement sur les Z (équivaut à rotate(...) )
  • rotateX(...) uniquement sur les X
  • rotateY(...) uniquement sur les Y

Par exemple: RotationX vs RotationY

À gauche, transform: rotateX(60deg).
À droite, transform: rotateY(60deg).
transform: rotate() scale

Par défaut, cette valeur accepte un ou deux arguments entre parenthèses. Si un seul argument est passé, il correspond à un facteur d'agrandissement/réduction. Si un 2e argument est ajouté, le premier correspond à un facteur d'agrandissement/réduction sur les X et le deuxième sur les Y. Il est donc possible de déformer un élément.

Voir l'exemple ci-dessous. Le 1er est agrandi de façon proportionnel de 150% (1.5) et le 2e de 150% (1.5) sur les X et 300% (3) sur les Y.

À gauche, transform: scale(1.5).
À droite, transform: scale(1.5, 3).

Il est possible d'effectuer un scale sur un seul axe en spécifiant cet axe dans la nom de la valeur. Par exemple:

  • scaleX(...) uniquement sur les X
  • scaleY(...) uniquement sur les Y
transform: scale() skew

Par défaut, cette valeur accepte un ou deux arguments entre parenthèses. Si un seul argument est passé, il correspond à une distorsion sur les X. Si un 2e argument est ajouté, le premier correspond à une distorsion sur les X et le deuxième sur les Y.

Cette valeur accepte comme comme argument les unités de type:

  • deg degrés | 360 degrés dans un cercle
  • turn tour | 1 tour dans un cercle

Par exemple, une distorsion de 45° sur les X:

Il est possible d'effectuer un skew sur un seul axe en spécifiant cet axe dans la nom de la valeur. Par exemple:

  • skewX(...) uniquement sur les X (équivaut à skew(...) )
  • skewY(...) uniquement sur les Y
transform: skew() transform-origin

Toutes les transformations des exemples précédents sont effectuées à partir d'un point d'origine se situant au centre de chaque élément. Soit l'équivalent de transform-origin: 50% 50%;

Cependant, il est possible de modifier cette valeur avec n'importe quelle unité CSS.

Par exemple, voici la même rotation de 45°:

  • À gauche avec un point de rotation central (50% 50%)
  • À droite avec un point de rotation en haut à gauche (0 0).
À gauche, transform-origin: 50% 50%.
À droite, transform-origin: 0 0;
transform-origin transform-origin
EXERCICE Transformation - Formes Pour cet exercice, vous allez devoir recréer des motifs pointillés en déplaçant des blocs de couleurs à l’aide de transformations CSS.