Les fonctions CSS scale(), scaleX() et scaleY() permettent d'agir sur l'echelle d'un élément. Cela aura pour conséquence un agrandissement ou une réduction de l'élement.

La fonction scale se présente de cette manière : transform : scale(x,y), scaleX(x) ou scaleY(y)

• x ou y supérieurs à 1, action d'agrandissement
• x ou y inférieurs à 1, action de réduction
• Pas d'unité pour les valeurs

• Si transform : scale(x,y) :
• x représente le coefficient de dilatation de la longueur de l'élement (1 par défaut)
• y représente le coefficient de dilatation de la hauteur de l'élement (1 par défaut)
• Si une seule valeur est renseignée, elle sera prise en compte pour x ET y


• Si transform : scaleX(x) :
• La fonction aura SEULEMENT une action sur la longueur de l'élément


• Si transform : scaleY(y) :
• La fonction aura SEULEMENT une action sur la hauteur de l'élément.

ATTENTION : Tous les éléments peuvent s'aggrandir et/ou se réduire mais attention aux images qui peuvent devenir flous et/ou illisibles !!! Ne pas en abuser !

Les fonctions CSS skew(), skewX() et skewY() permettent d'obliquer un élément. Cela aura pour conséquence une distorsion.

La fonction skew() se présente de cette manière : transform : skew(x,y), skewX(x) ou skewY(y);

• x et y représentent l'angle en degrés de la distorsion
• Ils sont exprimés en degrés

• Si transform : skew(x,y) :
• x représente l'angle de distorsion horizontale.
• y représente l'angle de distorsion verticale.
• Si une seule valeur est renseignée, cela reviendra à faire skewX(x).


• Si transform : skewX(x) :
• L'élément effectuera SEULEMENT une distorsion horizontale.


• Si transform : skewY(y) :
• L'élément effectuera SEULEMENT une distorsion verticale.

ATTENTION : Skew() est en voie de disparition. Seuls skewX() et skewY() seront utilisables.

La fonction CSS rotate() permet d'effectuer une rotation. Cette rotation déplace l'élément autour d'un point fixe (transform-origin) sans le déformer.

La fonction rotate se présente de cette manière : transform : rotate(x);

• x représente l'angle de la rotation
• x est exprimé en degré
• Si x est positif la rotation se fera dans le sens horaire
• Si x est négatif la rotation se fera dans le sens anti-horaire

Les fonctions CSS translate(), translateX() et translateY() permettent de décaler un élément horizontalement ou verticalement par rapport à sa position d'origine.

La fonction translate se présente de cette manière: transform : translate(x,y),translateX(x) ou translateY(y)

• Si transform : translate(x,y) :
• x représente le déplacement horizontal de l'objet, il est exprimé en unité de longueur (px ou em)
• y représente le déplacement vertical de l'objet, il est exprimé en unité de longueur (px ou em)


• Si transform : translateX(x) :
• x représente le déplacement vertical. L'élément fera UNIQUEMENT une translation verticale.


• Si transform : translateY(y) :
• y représente le déplacement vertical. L'élément fera UNIQUEMENT une translation verticale.

La fonction CSS3 matrix permet d'incliner, de changer l'échelle, de faire une rotation, de décaler un élément HTML en regroupant les élements scale(), skew(), rotate() et translate().

La fonction matrix() se présente de cette manière :transform : matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

rotate() n'est pas présente dans les paramètres de matrix() mais vous pouvez quand même la rajouter aux autres transformations (cf. ci dessous).

ATTENTION ! On ne précise pas d'unité pour les valeurs !

1. Si vous voulez appliquer une/des transformations SANS utiliser rotate()


• Les valeurs de scaleX() et scaleY() resteront intactes :
• Ex :transform: scale(2) est égal à transform: matrix(2, 0, 0, 2, 0, 0)


• les valeurs de translateX() et translateY() resteront intactes
• Ex :transform: translate(20px, 20px) est égal à transform: matrix(1, 0, 0, 1, 20, 20)


• Les valeurs de skewX() et skewY() seront modifiées
• Ex :transform: skew(20deg, 20deg) est égal à transform: matrix(1, 0.36397, 0.36397, 1, 0, 0)


2. Si vous voulez appliquer une / des transformations EN UTILISANT rotate()


• Toutes les valeurs seront modifiées, quel que soit la / les fonction(s) utilisé(es).


• les valeurs de translateX() et translateY() resteront intactes (lorsue d'autres transforms sont appliquées)
• Ex : transform: scale(2) est égal à transform: matrix(2, 0, 0, 2, 0, 0)
  Par contre transform: scale(2) rotate(45deg) donnera : transform: matrix(1.41421, 1.41421, -1.41421, 1.41421, 0, 0)
  (cf explications des matrices pour plus de renseignements)


3. Site pour transposer ses transforms en matrix()

Sur ce site (The Matrix revolution), vous pouvez rentrer vos transformations à la suite et elles se transposent en matrix().

La fonction CSS transform-origin permet de modifier l'origine du repère.

Elle est associée à une transformation (transform).

La fonction transform-origin se présente de cette manière : transform-origin: x y;

• x représente le déplacement horizontal du point d'origine.
• y représente le déplacement vertical du point d'origine.
• x et y sont exprimés en %, en unité de longueur(cm, px, ...) ou en mot clé (left, right, top, bottom ou center).
• La valeur de y peut être omise. Dans ce cas c'est la valeur par défaut qui est utilisée (center).

L'origine par défaut est le centre de l'élement (50%,50%).

Lorsque l'on applique transform-origin, le décalage du point d'origine s'effectuera à partir du bord en haut à gauche de l'élément.

Exemple : transform-origin: 10px; déplacera le point d'origine de 10 px vers la droite à partir du bord gauche par contre, il n'y a pas de valeur de y de spécifiée donc c'est la valeur par défaut qui est appliquée.