transform

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.

La propriété CSS transform permet de faire pivoter, redimensionner, incliner ou déplacer un élément. Elle modifie l'espace de coordonnées du modèle de mise en forme visuelle en CSS.

Si la propriété est différente de none, un contexte d'empilement sera créé. Dans ce cas, l'élément agira comme le bloc englobant pour les éléments qu'il contient et qui ont position: fixed; ou position: absolute;.

Vous pouvez également utiliser les propriétés de transformation individuelles : translate, rotate et scale. Ces propriétés sont appliquées dans l'ordre suivant : translate, rotate, scale et enfin transform.

Attention : Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des boîtes en ligne non-remplacées, des colonnes de tableau ou des groupes de colonnes de tableau ne peuvent pas être transformés.

Exemple interactif

transform: matrix(1, 2, 3, 4, 5, 6);

transform: translate(120px, 50%);

transform: scale(2, 0.5);

transform: rotate(0.5turn);

transform: skew(30deg, 20deg);

transform: scale(0.5) translate(-100%, -100%);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntaxe

css

/* Valeurs avec un mot-clé */
transform: none;

/* Valeurs fonctionnelles */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Valeurs avec plusieurs fonctions */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate3d(10px, 0, 20px) rotateY(30deg);

/* Valeurs globales */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

La propriété transform peut être définie avec une valeur ayant pour mot-clé none ou avec une ou plusieurs valeurs de type <transform-function>.

Valeurs

<transform-function>: Une ou plusieurs fonctions de transformation CSS à appliquer. Les transformations sont composées entre elles de gauche à droite, ce qui signifie que les transformations composées sont en pratique appliquées de droite à gauche.
none: Aucune transformation ne sera appliquée.

Accessibilité

Les animations de déplacement ou de zoom peuvent poser des problèmes d'accessibilité en déclenchant certaines migraines. Si vous devez inclure des animations sur votre site web, vous devez fournir aux utilisateur·ice·s une méthode qui leur permette de réduire voire de désactiver les animations sur l'ensemble du site.

À cet égard, on pourra utiliser la caractéristique média prefers-reduced-motion qui permet d'utiliser une requête média pour désactiver les animations si l'utilisateur·ice a indiqué une telle préférence via son système / son navigateur.

Pour en savoir plus :

Définition formelle

Valeur initiale	`none`
Applicabilité	éléments transformables
Héritée	non
Pourcentages	se rapporte à la taille de la boîte de l'élément
Valeur calculée	comme défini, mais avec les longueurs relatives converties en longueurs absolues
Type d'animation	une transformation
Crée un contexte d'empilement	oui

Syntaxe formelle

transform = 
  none              |
  <transform-list>  

<transform-list> = 
  <transform-function>+  

<transform-function> = 
  <scale3d()>      |
  <scale()>        |
  <scaleX()>       |
  <scaleY()>       |
  <scaleZ()>       |
  <translate3d()>  |
  <translate()>    |
  <translateX()>   |
  <translateY()>   |
  <translateZ()>   |
  <rotate3d()>     |
  <rotate()>       |
  <rotateX()>      |
  <rotateY()>      |
  <rotateZ()>      |
  <skew()>         |
  <skewX()>        |
  <skewY()>        |
  <matrix3d()>     |
  <matrix()>       |
  <perspective()>  

<scale3d()> = 
  scale3d( [ <number> | <percentage> ]#{3} )  

<scale()> = 
  scale( <number> , <number>? )  

<scaleX()> = 
  scaleX( <number> )  

<scaleY()> = 
  scaleY( <number> )  

<scaleZ()> = 
  scaleZ( [ <number> | <percentage> ] )  

<translate3d()> = 
  translate3d( <length-percentage> , <length-percentage> , <length> )  

<translate()> = 
  translate( <length-percentage> , <length-percentage>? )  

<translateX()> = 
  translateX( <length-percentage> )  

<translateY()> = 
  translateY( <length-percentage> )  

<translateZ()> = 
  translateZ( <length> )  

<rotate3d()> = 
  rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )  

<rotate()> = 
  rotate( [ <angle> | <zero> ] )  

<rotateX()> = 
  rotateX( [ <angle> | <zero> ] )  

<rotateY()> = 
  rotateY( [ <angle> | <zero> ] )  

<rotateZ()> = 
  rotateZ( [ <angle> | <zero> ] )  

<skew()> = 
  skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )  

<skewX()> = 
  skewX( [ <angle> | <zero> ] )  

<skewY()> = 
  skewY( [ <angle> | <zero> ] )  

<matrix3d()> = 
  matrix3d( <number>#{16} )  

<matrix()> = 
  matrix( <number>#{6} )  

<perspective()> = 
  perspective( [ <length [0,∞]> | none ] )  

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

Déplacer et pivoter un élément

HTML

html

<div>L'élément transformé</div>

CSS

css

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

Résultat

Ordre des transformations

L'ordre des fonctions de transformation est important. Dans cet exemple, deux boîtes sont pivotées et déplacées par les mêmes valeurs ; seule l'ordre des fonctions de transformation est différent.

HTML

html

<div class="original"></div>
<div class="one">1</div>
<div class="two">2</div>

CSS

div {
  height: 200px;
  width: 200px;
  position: absolute;
  left: 200px;
  top: 50px;
  font-size: 4rem;
  line-height: 200px;
  text-align: center;
}
.original {
  border: 1px dashed;
}
.original::before,
.original::after {
  content: "";
  position: absolute;
  top: 100px;
  width: 500px;
  left: -150px;
  height: 1px;
  border-top: 2px dotted;
}
.original::after {
  transform: rotate(135deg);
}
.one {
  background-color: #cccccc;
}
.two {
  background-color: #d6bb72;
}

css

.one {
  transform: translateX(200px) rotate(135deg);
}
.two {
  transform: rotate(135deg) translateX(200px);
}

Résultat

Lorsque un élément est pivoté avant d'être déplacé, la direction de la translation se fait selon l'axe pivoté. L'axe est indiqué par les lignes pointillées.

Plus d'exemples

Veuillez consulter Utiliser les transformations CSS et <transform-function> pour plus d'exemples.

Spécifications

Spécification
CSS Transforms Module Level 2 # transform-functions
CSS Transforms Module Level 1 # transform-property
Scalable Vector Graphics (SVG) 2 # TransformProperty

Compatibilité des navigateurs

Voir aussi

Utiliser les transformations CSS
Le type de donnée <transform-function> avec toutes les fonctions de transformation expliquées.
Propriétés CSS individuelles : translate, rotate et scale (il n'y a pas de propriété skew).
L'attribut SVG transform
Outil en ligne pour visualiser les fonctions de transformation CSS : Terrain d'essai de transformations CSS ^(angl.)

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 3 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu