path: root/files/fr/web/css/transform-function/index.html

---
title: transform-function
slug: Web/CSS/transform-function
tags:
  - CSS
  - Reference
  - Type de donnée
translation_of: Web/CSS/transform-function
---
<div>{{CSSRef}}</div>

<p>Le type de donnée <strong><code>&lt;transform-function&gt;</code></strong> représente une fonction qui, lorsqu'elle est appliquée à un élément, permet de modifier sa représentation géométrique. Ces transformations sont généralement exprimées sous forme de matrices et l'image obtenue peut être déterminée en appliquant la matrice de la transformation sur chaque point de l'image. On peut ainsi tourner, redimensionner, distordre. Ce type de donnée est utilisé avec la propriété {{cssxref("transform")}}.</p>

<h2 id="Coordonnées_en_deux_dimensions">Coordonnées en deux dimensions</h2>

<p>Il existe plusieurs modèles de repères géométriques permettant de décrire des transformations. Le repère utilisé le plus communément est <a href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>.</p>

<h3 id="Le_système_de_coordonnées_cartésiennes">Le système de coordonnées cartésiennes</h3>

<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p>

<p>Pour <a class="external" href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>, chaque point de l'espace est décrit avec deux valeurs, l'abscisse et l'ordonnée. L'origine du repère <code>(0, 0)</code> correspond au coin supérieur gauche de l'élément. À la différence des conventions usuelles, l'axe verticale (<em>y</em>) se dirige vers le bas. Chaque point est décrit avec la notation <code>(x,y)</code>.</p>

<p>Chaque fonction linéaire est décrite avec une matrice 2 x 2 :</p>

<div style="text-align: center;">
<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
</div>

<p>L'application d'une transformation consiste à multiplier la matrice de transformation au vecteur de coordonnées <code>(x,y)</code> :</p>

<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p>

<p>On peut appliquer plusieurs transformations les unes à la suite des autres :</p>

<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p>

<p>En utilisant cette notation, on peut décrire et enchaîner (ou composer) la plupart des transformations : des rotations, des homothéties et des distorsions. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche. Une transformation qui n'est pas linéaire ne pourra pas être représentée par cet outil. Ainsi, l'opération de translation ne pourra pas être représentée par une matrice et devra être gérée à part.</p>

<p><a class="external" href="https://fr.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Les coordonnées homogènes de Möbius</a> utilisées en <a class="external" href="https://fr.wikipedia.org/wiki/G%C3%A9om%C3%A9trie_projective">géométrie projective</a> permettent d'obtenir des matrices de transformations 3x3. Bien que plus complexe et moins usitées, celles-ci permettent de représenter les translations car ces dernières correspondent à des fonctions linéaires pour cette algèbre.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<p>Plusieurs fonctions sont disponibles en CSS pour décrire des transformations. Chacune des fonctions qui suivent applique une opération géométrique, en 2D ou en 3D.</p>

<h3 id="Matrices_de_transformation">Matrices de transformation</h3>

<dl>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt>
 <dd>La fonction <code>matrix()</code> permet de définir une matrice de transformation homogène en deux dimensions. Cette matrice contient six coefficients. Les valeurs constantes de ces matrices sont implicites et ne font donc pas partie des paramètres. Les autres paramètres sont décrits dans l'ordre des colonnes.</dd>
 <dd><code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie pour <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt>
 <dd>La fonction <code>matrix3d()</code> permet de définir une transformation en trois dimensions grâce à une matrice homogène 4x4. Les 16 paramètres sont décrits dans l'ordre des colonnes.</dd>
</dl>

<h3 id="Perspective">Perspective</h3>

<dl>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt>
 <dd>La fonction <code>perspective()</code> définit la distance entre le plan de coordonnées z=0 et l'œil de l'utilisateur. Cela permet de placer une perspective en trois dimensions sur l'élément. Chaque élément 3D pour lequel z est supérieur à 0 devient plus grand et chaque élément pour lequel z est négatif devient plus petit.</dd>
</dl>

<h3 id="Rotation">Rotation</h3>

<dl>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt>
 <dd>La fonction <code>rotate()</code> définit une transformation qui déplace l'élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer. La quantité de mouvement est définie par l'angle passé en argument. Si la valeur fournie est positive, le mouvement se fait dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et sinon dans le sens inverse (sens <em>anti-horaire</em>).</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt>
 <dd>La fonction <code>rotate3d()</code> définit une transformation qui déplace l'élément autour d'un axe donné, sans déformer l'élément. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. Contrairement aux rotations en deux dimensions (rotations <em>planes</em>), la composition des rotations en trois dimensions n'est pas commutative (autrement dit, l'ordre dans lequel elles sont appliquées a toute son importance).</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt>
 <dd>La fonction <code>rotateX()</code> définit une transformation qui déplace un élément autour de l'axe des abscisses sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd>
 <dd><code>rotateX(a)</code> est une notation raccourcie pour <code>rotate3D(1, 0, 0, a)</code>.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt>
 <dd>La fonction <code>rotateY()</code> définit une transformation qui déplace un élément autour de l'axe des ordonnées sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd>
 <dd><code>rotateY(a)</code> est une notation raccourcie pour <code>rotate3D(0, 1, 0, a)</code>.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt>
 <dd>La fonction <code>rotateZ()</code> définit une transformation qui déplace un élément autour de l'axe Z sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd>
 <dd><code>rotateZ(a)</code> est une notation raccourcie pour <code>rotate3D(0, 0, 1, a)</code>.</dd>
</dl>

<h3 id="Changement_d'échelle">Changement d'échelle</h3>

<dl>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/scale">scale()</a></code></dt>
 <dd>La fonction <code>scale()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon chacun des deux axes plans. Si les deux coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd>
 <dt><a href="/fr/docs/Web/CSS/transform-function/scale3d">scale3d()</a></dt>
 <dd>La fonction <code>scale3d()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon les trois axes. Si les trois coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt>
 <dd>La fonction <code>scaleX()</code> modifie l'abscisse de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleX(-1)</code> permet de définir une symétrie axiale qui passe par l'axe vertical de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd>
 <dd><code>scaleX(sx)</code> est une notation raccourcie pour <code>scale(sx, 1)</code> ou pour <code>scale3d(sx, 1, 1)</code>.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt>
 <dd>La fonction <code>scaleY()</code> modifie l'ordonnée de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleY(-1)</code> permet de définir une symétrie axiale qui passe par l'axe horizontal de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd>
 <dd><code>scaleY(sy)</code> est une notation raccourcie pour <code>scale(1, sy)</code> ou pour <code>scale3d(1, sy, 1)</code>.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt>
 <dd>La fonction <code>scaleZ()</code> modifie la côte de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleZ(-1)</code> permet de définir une symétrie axiale qui passe par l'axe Z de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd>
 <dd><code>scaleZ(sz)</code> est une notation raccourcie pour <code>scale3d(1, 1, sz)</code>.</dd>
</dl>

<h3 id="Distorsions">Distorsions</h3>

<dl>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/skew">skew()</a></code></dt>
 <dd>La fonction <code>skew()</code> permet de décrire une distorsion de l'élément où chaque point est tourné d'un angle dans chaque direction. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt>
 <dd>La fonction <code>skewX()</code> permet de distordre un élément dans la direction horizontale. Le résultat est obtenu en augmentant l'abscisse par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt>
 <dd>La fonction <code>skewY()</code> permet de distordre un élément dans la direction verticale. Le résultat est obtenu en augmentant l'ordonnée par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
</dl>

<h3 id="Translations">Translations</h3>

<dl>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate">translate()</a></code></dt>
 <dd>La fonction <code>translate()</code> permet de déplacer un élément sur le plan formé par le document. Cette transformation est caractérisée par un vecteur contenant deux coordonnées dont chacune définit la quantité de déplacement horizontale et verticale.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt>
 <dd>La fonction <code>translate3d()</code> permet de déplacer un élément dans l'espace en 3D. Cette transformation est caractérisée par un vecteur en 3 dimensions dont les coordonnées définissent les quantités de déplacement respectives aux trois axes.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt>
 <dd>La fonction <code>translateX()</code> permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement horizontal.</dd>
 <dd><code>translateX(tx)</code>est une notation raccourcie pour ​​​​​​ <code>translate(tx, 0)</code>.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt>
 <dd>La fonction <code>translateY()</code> permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement vertical.</dd>
 <dd><code>translateY(ty)</code> est une notation raccourcie pour <code>translate(0, ty)</code>.</dd>
 <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt>
 <dd>La fonction <code>translateZ()</code> permet de déplacer un élément sur l'axe z de l'espace en 3D. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement.</dd>
 <dd><code>translateZ(tz)</code> est une notation raccourcie pour <code>translate3d(0, 0, tz)</code>.</dd>
</dl>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Transforms 2', '#transform-functions', '&lt;transform-function&gt;')}}</td>
   <td>{{Spec2('CSS Transforms 2')}}</td>
   <td>Added 3D transform functions.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transforms', '#transform-functions', '&lt;transform-function&gt;')}}</td>
   <td>{{Spec2('CSS3 Transforms')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.types.transform-function")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>La propriété CSS {{cssxref("transform")}}</li>
</ul>