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 1^er correspond à une translation sur les X ↔️ et le 2^e, (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
transform: translate(100%);
déplace l'élément sur les X ↔️.

Tandis qu'avec deux arguments séparés par une virgule
transform: translate(100%, 100%);
l'élément se déplace sur les X et Y ↘️.

Voir l'exemple ci-dessous:

CodePen | smnarnold 👀

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

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

rotate 🔄

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

• deg degrés | 360 degrés dans un cercle

• 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:

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

CodePen | smnarnold 👀

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 2^e 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 1^er est agrandi de façon proportionnel de 150% (1.5) et le 2^e de 150% (1.5) sur les X et 300% (3) sur les Y.

CodePen | smnarnold 👀

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

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-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).

CodePen | smnarnold 👀