Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Le type de donnée CSS <transform-function> représente une transformation qui affecte l'apparence d'un élément. Les fonctions de transformation peuvent faire pivoter, redimensionner, déformer ou déplacer un élément en 2D ou 3D. Ce type est utilisé dans la propriété transform.
Le type de donnée <transform-function> s'utilise avec l'une des fonctions de transformation listées ci-dessous. Chaque fonction applique une opération géométrique en 2D ou 3D.
Décrit une matrice de transformation homogène en 2D.
matrix3d()Décrit une transformation 3D sous forme de matrice homogène 4×4.
Définit la distance entre l'utilisateur·ice et le plan z=0.
Fait pivoter un élément autour d'un point fixe sur le plan 2D.
rotate3d()Fait pivoter un élément autour d'un axe fixe dans l'espace 3D.
rotateX()Fait pivoter un élément autour de l'axe horizontal.
rotateY()Fait pivoter un élément autour de l'axe vertical.
rotateZ()Fait pivoter un élément autour de l'axe z.
Met à l'échelle un élément sur le plan 2D.
scale3d()Met à l'échelle un élément dans l'espace 3D.
scaleX()Met à l'échelle un élément horizontalement.
scaleY()Met à l'échelle un élément verticalement.
scaleZ()Met à l'échelle un élément selon l'axe z.
Incline un élément sur le plan 2D.
skewX()Incline un élément horizontalement.
skewY()Incline un élément verticalement.
Déplace un élément sur le plan 2D.
translate3d()Déplace un élément dans l'espace 3D.
translateX()Déplace un élément horizontalement.
translateY()Déplace un élément verticalement.
translateZ()Déplace un élément selon l'axe z.
Divers modèles de coordonnées peuvent être utilisés pour décrire la taille et la forme d'un élément HTML, ainsi que les transformations qui lui sont appliquées. Le plus courant est le système de coordonnées cartésiennes, bien que les coordonnées homogènes soient parfois utilisées.
Dans le système de coordonnées cartésiennes, un point en deux dimensions est décrit à l'aide de deux valeurs : une coordonnée x (abscisse) et une coordonnée y (ordonnée). Ceci est représenté par la notation vectorielle (x, y).
En CSS (et dans la plupart des graphismes informatiques), l'origine (0, 0) représente le coin supérieur gauche de tout élément. Les coordonnées positives sont vers le bas et la droite de l'origine, tandis que les négatives sont vers le haut et la gauche. Ainsi, un point situé 2 unités à droite et 5 unités en bas sera (2, 5), tandis qu'un point 3 unités à gauche et 12 unités en haut sera (-3, -12).
Les fonctions de transformation modifient l'apparence d'un élément en manipulant les valeurs de ses coordonnées. Une fonction de transformation linéaire est décrite à l'aide d'une matrice 2×2, comme ceci :
(acbd)\begin{pmatrix} a & c \\ b & d \end{pmatrix}La fonction est appliquée à un élément par multiplication matricielle. Ainsi, chaque coordonnée change en fonction des valeurs de la matrice :
(acbd)(xy)=(ax+cybx+dy)\left( \begin{array}{cc} a & c \\ b & d \end{array} \right) \left( \begin{array}{c} x \\ y \end{array} \right) = \left( \begin{array}{c} ax + cy \\ bx + dy \end{array} \right)Il est même possible d'appliquer plusieurs transformations à la suite :
(a1c1b1d1)(a2c2b2d2)=(a1a2+c1b2a1c2+c1d2b1a2+d1b2b1c2+d1d2)\left( \begin{array}{cc} a_1 & c_1 \\ b_1 & d_1 \end{array} \right) \left( \begin{array}{cc} a_2 & c_2 \\ b_2 & d_2 \end{array} \right) = \left( \begin{array}{cc} a_1a_2 + c_1b_2 & a_1c_2 + c_1d_2 \\ b_1a_2 + d_1b_2 & b_1c_2 + d_1d_2 \end{array} \right)Avec cette notation, il est possible de décrire, et donc de composer, la plupart des transformations courantes : rotations, mises à l'échelle ou inclinaisons. (En fait, toutes les transformations qui sont des fonctions linéaires peuvent être décrites.) Les transformations composées sont effectivement appliquées de droite à gauche.
Cependant, une transformation majeure n'est pas linéaire et doit donc être traitée à part avec cette notation : la translation. Le vecteur de translation (tx, ty) doit être exprimé séparément, comme deux paramètres additionnels.
Note : Bien que plus complexes que les coordonnées cartésiennes, les coordonnées homogènes en géométrie projective conduisent à des matrices de transformation 3×3, et peuvent exprimer les translations comme des fonctions linéaires.
Note : Les fonctions de transformation sont utilisées avec la propriété transform mais pas avec les propriétés individuelles de transformation — translate, scale et rotate.
L'exemple suivant propose un cube 3D créé à partir d'éléments DOM et de transformations, ainsi qu'un menu déroulant permettant de choisir différentes fonctions de transformation à appliquer au cube, afin de comparer les effets des différents types.
Choisissez-en une, et la transformation est appliquée au cube ; après 2 secondes, le cube revient à son état initial. L'état initial du cube est légèrement incliné avec transform3d(), pour permettre de voir l'effet de toutes les transformations.
| CSS Transforms Module Level 1 # transform-functions |
| CSS Transforms Module Level 2 # transform-functions |
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Cette page a été modifiée le 23 avr. 2026 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.