Propriété CSS transform

La propriété CSS transform vous permet de repositionner visuellement, redimensionner, faire pivoter ou déformer un élément sans affecter la mise en page environnante. C'est l'une des propriétés CSS3, et elle accepte soit le mot-clé none, soit une ou plusieurs fonctions de transformation — par exemple rotate(), scale(), translate() ou skew().

Un point essentiel à comprendre : une transformation change la façon dont un élément est rendu, mais l'espace qu'il occupe initialement dans le flux du document reste inchangé. Les éléments voisins ne se recalculent pas lorsqu'on applique une transformation, ce qui est précisément pourquoi les transformations sont peu coûteuses à animer — le navigateur peut les déléguer au GPU.

Cette page couvre la syntaxe, l'ensemble complet des fonctions de transformation 2D et 3D, la façon dont le point autour duquel un élément se transforme (transform-origin) influence le résultat, ainsi que la façon dont les transformations s'associent aux transitions et aux animations pour créer du mouvement.

Info

Les transformations s'appliquent aux éléments transformables — les boîtes de type bloc, flex, grid et inline-block, ainsi que les éléments SVG. Elles ne s'appliquent pas aux éléments en ligne non remplacés tels qu'un simple <span> (donnez-lui d'abord display: inline-block).

Vous pouvez enchaîner plusieurs fonctions dans une seule déclaration. Elles sont appliquées de droite à gauche, donc la fonction la plus à droite s'exécute en premier :

/* first rotate, then translate the rotated box */
transform: translate(10px, 40px) rotate(50deg);

Valeur initiale	none
S'applique à	Les éléments transformables.
Hérité	Non.
Animable	Oui.
Version	CSS3
Syntaxe DOM	Object.style.transform = "rotate(10deg)";

Syntaxe

Valeurs CSS transform

transform: none | transform-functions | initial | inherit;

Exemple de la propriété transform :

Exemple de code CSS transform

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px dashed #666;
        background-color: #8ebf42;
        transform: translate(10px, 40px) rotate(50deg);
        width: 130px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <div>An element</div>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple avec plusieurs fonctions de transformation

Exemple CSS transform avec plusieurs valeurs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 35px 20px;
      }
      div.box1 {
        width: 130px;
        height: 80px;
        border: 1px solid #000;
        background-color: #1c87c9;
        transform: rotate(30deg);
      }
      div.box2 {
        width: 120px;
        height: 80px;
        border: 1px solid #000;
        background-color: #8ebf42;
        transform: skewY(30deg);
      }
      div.box3 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FFFF00;
        transform: scaleY(1.5);
      }
      div.box4 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #ccc;
        transform: rotate(160deg);
      }
      div.box5 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #990099;
        transform: translateX(50px);
      }
      div.box6 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FF0000;
        transform: skew(170deg, 170deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <h3>transform: rotate(30deg):</h3>
    <div class="box1"></div>
    <h3>transform: skewY(30deg):</h3>
    <div class="box2"></div>
    <h3>transform: scaleY(1.5):</h3>
    <div class="box3"></div>
    <h3>transform: rotate(160deg):</h3>
    <div class="box4"></div>
    <h3>transform: translateX(50px):</h3>
    <div class="box5"></div>
    <h3>transform: skew(170deg,170deg):</h3>
    <div class="box6"></div>
  </body>
</html>

Essayez vous-même »

Fonctions de transformation

translate()

translate(tx, ty) déplace un élément horizontalement et verticalement sans affecter les autres éléments. tx est le décalage horizontal, ty le décalage vertical ; une valeur positive de ty déplace l'élément vers le bas. Utilisez translateX() ou translateY() pour un seul axe. Comme elle ne déclenche pas de recalcul de mise en page, translate() est la méthode privilégiée pour déplacer un élément dans les animations :

transform: translate(50px, 20px); /* right 50px, down 20px */
transform: translateX(-30px);     /* left 30px */

scale()

scale(x, y) redimensionne un élément par rapport à sa taille actuelle. 1 le laisse inchangé, 2 le double, 0.5 le divise par deux, et une valeur négative le reflète. Passez un seul argument pour mettre à l'échelle les deux axes de manière égale :

transform: scale(1.5);   /* 150% in both directions */
transform: scale(2, 0.5);/* twice as wide, half as tall */

rotate()

rotate(angle) fait pivoter un élément autour de son origine. Un angle positif tourne dans le sens des aiguilles d'une montre, un angle négatif dans le sens inverse. L'angle est exprimé en deg, rad, grad ou turn :

transform: rotate(45deg);
transform: rotate(-0.25turn); /* same as rotate(-90deg) */

skew()

skew(ax, ay) incline (penche) un élément le long des axes x et y. skewX() et skewY() inclinent sur un seul axe. Une inclinaison de 0deg laisse l'axe intact :

transform: skewX(20deg);
transform: skew(20deg, 10deg);

matrix()

matrix(a, b, c, d, e, f) combine toutes les transformations 2D — mise à l'échelle, inclinaison, rotation et translation — en une seule fonction. On l'écrit rarement à la main ; les navigateurs la calculent en interne, et c'est la forme que l'on voit en lisant un style calculé.

transform-origin

Par défaut, chaque transformation pivote autour du centre de l'élément. La propriété transform-origin change ce point d'ancrage, ce qui modifie considérablement le résultat d'un rotate() ou d'un scale(). Par exemple, transform-origin: top left fait pivoter rotate(45deg) autour du coin supérieur gauche de l'élément plutôt que de son centre.

Transformations 2D et 3D

Les fonctions ci-dessus opèrent dans le plan 2D. Leurs homologues 3D — translateZ(), rotateX(), rotateY(), rotate3d(), etc. — déplacent et font pivoter les éléments sur l'axe z (vers le spectateur ou en s'en éloignant). Les transformations 3D n'ont un aspect tridimensionnel que lorsqu'une perspective est appliquée à l'élément ou à son parent ; sans perspective, un rotateY() écrase simplement l'élément horizontalement en apparence.

Animer les transformations

La propriété transform est animable, ce qui en fait le moteur principal des mouvements d'interface fluides. Combinez-la avec une transition pour les effets de survol, ou avec une animation et des images clés pour un mouvement continu :

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.05) translateY(-4px);
}

Valeurs

Valeur	Description	Essayer
none	Aucune transformation n'est appliquée.	Essayer »
translate()	Translate l'élément par un vecteur [tx, ty]. Tx est la translation selon l'axe x. Ty est la translation selon l'axe y.	Essayer »
translateX()	Translate l'élément selon l'axe x.	Essayer »
translateY()	Translate l'élément selon l'axe y.	Essayer »
scale(x, y)	Agrandit ou réduit un élément.	Essayer »
scaleX()	Met à l'échelle un élément selon l'axe x.	Essayer »
scaleY()	Met à l'échelle un élément selon l'axe y.	Essayer »
rotate(angle)	Fait pivoter un élément en deux dimensions. L'angle est spécifié en paramètre.	Essayer »
skew()	Définit une transformation d'inclinaison 2D selon l'axe x et l'axe y.	Essayer »
skewX()	Définit une transformation d'inclinaison 2D selon l'axe x.	Essayer »
skewY()	Définit une transformation d'inclinaison 2D selon l'axe y.	Essayer »
matrix()	Définit une transformation 2D à l'aide d'une matrice de six valeurs.	Essayer »
translateZ()	Translate un élément d'une quantité donnée selon l'axe z.
translate3d()	Définit une translation tridimensionnelle.
scaleZ()	Met à l'échelle un élément dans la troisième dimension, selon l'axe z.
scale3d()	Définit une transformation de mise à l'échelle tridimensionnelle.
rotateX()	Fait pivoter un élément autour de l'axe x dans l'espace tridimensionnel.	Essayer »
rotateY()	Fait pivoter un élément autour de l'axe y dans l'espace tridimensionnel.	Essayer »
rotateZ()	Fait pivoter un élément autour de l'axe z dans l'espace tridimensionnel.	Essayer »
rotate3d()	Définit une transformation de rotation tridimensionnelle.
matrix3d()	Définit une transformation 3D à l'aide d'une matrice 4x4 de 16 valeurs.
perspective()	Définit une vue en perspective pour l'élément tridimensionnel.
initial	Donne à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelle affirmation est incorrecte concernant la propriété transform ?

Elle peut s'appliquer aux éléments transformables.La propriété transform permet de faire pivoter, mettre à l'échelle, incliner ou translater l'élément.Elle ne spécifie que la transformation bidimensionnelle de l'élément.