initial commit

22 files changed, 2870 insertions, 0 deletions

diff --git a/files/fr/web/css/transform-function/index.html b/files/fr/web/css/transform-function/index.html
new file mode 100644
index 0000000000..7ee42e43cb
--- /dev/null
+++ b/files/fr/web/css/transform-function/index.html
@@ -0,0 +1,162 @@
+---
+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>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.transform-function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété CSS {{cssxref("transform")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/matrix()/index.html b/files/fr/web/css/transform-function/matrix()/index.html
new file mode 100644
index 0000000000..9e1068a7e0
--- /dev/null
+++ b/files/fr/web/css/transform-function/matrix()/index.html
@@ -0,0 +1,112 @@
+---
+title: matrix()
+slug: Web/CSS/transform-function/matrix()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/matrix()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>matrix()</code></strong> définit une matrice homogène de transformation, définie par 6 coefficients. Les paramètres de cette fonction sont ces coefficients, dans l'ordre des lignes puis des colonnes, suivis des coefficients de translation.</p>
+
+<p><code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie, équivalente à <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code> <code>b</code> <code>c</code> <code>d</code></dt>
+ <dd>Les coefficients de la matrice, de type {{cssxref("&lt;number&gt;")}}, qui définissent la transformation linéaire.</dd>
+ <dt><code>tx</code> <code>ty</code></dt>
+ <dd>Les coefficients de la matrice, de type {{cssxref("&lt;number&gt;")}}, qui définissent la translation à appliquer.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("&lt;length&gt;")}} pour les coefficients <code>tx</code> et <code>ty</code>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[a b c d tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation{
+  transform: matrix(0.87,-0.5,0,0.87,0,1);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<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("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li>
+ <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Comprendre les matrices de transformations CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/matrix3d()/index.html b/files/fr/web/css/transform-function/matrix3d()/index.html
new file mode 100644
index 0000000000..0f638286b7
--- /dev/null
+++ b/files/fr/web/css/transform-function/matrix3d()/index.html
@@ -0,0 +1,182 @@
+---
+title: matrix3d()
+slug: Web/CSS/transform-function/matrix3d()
+tags:
+  - CSS
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/matrix3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>matrix3d()</code></strong> décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><var>a1</var> <var>b1</var> <var>c1</var> <var>d1</var> <var>a2</var> <var>b2</var> <var>c2</var> <var>d2</var> <var>a3</var> <var>b3</var> <var>c3</var> <var>d3</var> <var>d4</var></dt>
+ <dd>Des valeurs de type {{cssxref("&lt;number&gt;")}} qui sont les coefficients de la matrice définissant la transformation linéaire.</dd>
+ <dt><code>a4</code> <code>b4<em> </em>c4</code></dt>
+ <dd>Les coefficients de type {{cssxref("&lt;number&gt;")}} qui définissent la translation à appliquer.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("&lt;length&gt;")}} pour les coefficients <code>a4</code>, <code>b4</code> et <code>c4</code>.</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1" rowspan="2">Les matrices exprimées avec des coordonnées cartésiennes ne permettent pas de représenter des transformations 3D affines car les translations ne sont pas des transformations linéaires.</td>
+   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation{
+  transform: matrix3d(0.87,-0.5,0.00,0,0.50,0.87,0.00,0,0,0,1,0,0,0,0,1);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","100%","200")}}</p>
+
+<h3 id="Translation_et_homothétie_matricielle">Translation et homothétie matricielle</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="foo"&gt;
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
+ necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">html {
+  width: 100%;
+}
+body {
+  height: 100vh;
+  /* Centering content */
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-content: center;
+
+}
+.foo {
+  width: 50%;
+  padding: 1em;
+  color: white;
+  background: #ff8c66;
+  border: 2px dashed black;
+  text-align: center;
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+   /* Setting up animation for better demonstration */
+  animation: MotionScale 2s alternate linear infinite;
+}
+
+@keyframes MotionScale {
+  from {
+    /*
+      Identity matrix is used as basis here.
+      The matrix below describes the
+      following transformations:
+        Translates every X point by -50px
+        Translates every Y point by -100px
+        Translates every Z point by 0
+        Scales down by 10%
+    */
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      -50,-100,0,1.1
+    );
+
+  }
+  50% {
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      0,0,0,0.9
+    );
+  }
+  to {
+     transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      50,100,0,1.1
+    )
+  }
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Translation_et_homothétie_matricielle', '100%', '400px')}}</p>
+
+<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", "#funcdef-matrix3d", "matrix3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Comprendre les matrices de transformations CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/perspective()/index.html b/files/fr/web/css/transform-function/perspective()/index.html
new file mode 100644
index 0000000000..0fb86405b6
--- /dev/null
+++ b/files/fr/web/css/transform-function/perspective()/index.html
@@ -0,0 +1,159 @@
+---
+title: perspective()
+slug: Web/CSS/transform-function/perspective()
+tags:
+  - CSS
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/perspective()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>perspective()</code></strong> définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p>Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-perspective.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La fonction de transformation <code>perspective()</code>s'applique à l'élément qu'on veut transformer. En revanche, les propriétés {{cssxref('perspective')}} et {{cssxref('perspective-origin')}} s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">perspective(<var>l</var>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><var>l</var></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation <code>z = 0</code>. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</p>
+   </td>
+   <td colspan="1" rowspan="2">Une perspective n'est pas une transformation linéaire de ℝ<sup>3</sup> et ne peut donc pas être représentée en utilisant une matrice du système cartésien.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Appliquer_une_perspective_sur_un_objet_3D">Appliquer une perspective sur un objet 3D</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+p + div {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  margin-left: 100px;
+}
+.no-perspective-box {
+  transform: rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-far {
+  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-closer {
+  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.top {
+  background-color: skyblue;
+  transform: rotateX(90deg) translate3d(0, 0, 50px);
+}
+
+.left {
+  background-color: pink;
+  transform: rotateY(-90deg) translate3d(0, 0, 50px);
+}
+
+.front {
+  background-color: limegreen;
+  transform: translate3d(0, 0, 50px);
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Sans perspective :&lt;/p&gt;
+&lt;div class="no-perspective-box"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Avec une perspective (9cm) :&lt;/p&gt;
+&lt;div class="perspective-box-far"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Avec une perspective (4cm) :&lt;/p&gt;
+&lt;div class="perspective-box-closer"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '350', '', 'Web/CSS/transform-function/perspective')}}</p>
+
+<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", "#funcdef-perspective", "perspective()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotate()/index.html b/files/fr/web/css/transform-function/rotate()/index.html
new file mode 100644
index 0000000000..eedbb8b131
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotate()/index.html
@@ -0,0 +1,153 @@
+---
+title: rotate()
+slug: Web/CSS/transform-function/rotate()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotate()</code></strong> définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer (autrement dit, qui applique une rotation plane). C'est une rotation autour de ce point. Par défaut, cette origine correspond au centre de l'élément.</p>
+
+<p>La rotation plane est définie par un angle, l'argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>L'angle de la rotation créée grâce à <code>rotate()</code> est fourni comme argument à cette fonction via une valeur de type {{cssxref("&lt;angle&gt;")}}. Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre.</p>
+
+<pre class="syntaxbox notranslate">rotate(<var>a</var>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><var>a</var></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes surℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.tourne {
+  transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="tourne"&gt;Tourné&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple", "auto", 180)}}</p>
+
+<h3 id="Associer_une_rotation_à_une_autre_transformation">Associer une rotation à une autre transformation</h3>
+
+<p>Lorsqu'on applique plusieurs transformations, il faut faire attention à l'ordre dans lequel elles sont appliquées. Ainsi, si on applique une rotation avant une translation, la translation se fera selon le nouvel axe de rotation !</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  position: absolute;
+  left: 40px;
+  top: 40px;
+  width: 100px;
+  height: 100px;
+  background-color: lightgray;
+}
+
+.rotate {
+  background-color: transparent;
+  outline: 2px dashed;
+  transform: rotate(45deg);
+}
+
+.rotate-translate {
+  background-color: pink;
+  transform: rotate(45deg) translateX(180px);
+}
+
+.translate-rotate {
+  background-color: gold;
+  transform: translateX(180px) rotate(45deg);
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotate"&gt;Tourné&lt;/div&gt;
+&lt;div class="rotate-translate"&gt;Tourné puis translaté&lt;/div&gt;
+&lt;div class="translate-rotate"&gt;Translaté puis tourné&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Associer_une_rotation_avec_une_autre_transformation", "auto", 320)}}</p>
+
+<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("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotate3d()/index.html b/files/fr/web/css/transform-function/rotate3d()/index.html
new file mode 100644
index 0000000000..29c8b92462
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotate3d()/index.html
@@ -0,0 +1,144 @@
+---
+title: rotate3d()
+slug: Web/CSS/transform-function/rotate3d()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotate3d()</code></strong> définit une transformation qui déplace un élément autour d'un axe sans le déformer. L'angle de la rotation est un argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur <code>[x, y, z]</code> et passe par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul <code>[0, 0, 0]</code>) empêchera la rotation d'être appliquée mais la propriété CSS restera valide.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en X (l'abscisse) du vecteur qui sera l'axe de la rotation.</dd>
+ <dt><code>y</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en Y (l'ordonnée) du vecteur qui sera l'axe de la rotation.</dd>
+ <dt><code>z</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en Z (la côte) du vecteur qui sera l'axe de la rotation.</dd>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
+   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_une_rotation_en_Y">Définir une rotation en Y</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  perspective: 800px;
+}
+
+p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+  margin: auto;
+}
+
+.transformation{
+  transform: rotate3d(0,1,0,60deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_rotation_en_Y","100%","200")}}</p>
+
+<h3 id="Définir_une_rotation_sur_un_axe_quelconque">Définir une rotation sur un axe quelconque</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_rotation_sur_un_axe_quelconque","100%","200")}}</p>
+
+<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", "#funcdef-rotate3d", "rotate3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotatex()/index.html b/files/fr/web/css/transform-function/rotatex()/index.html
new file mode 100644
index 0000000000..01fc488e05
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotatex()/index.html
@@ -0,0 +1,108 @@
+---
+title: rotateX()
+slug: Web/CSS/transform-function/rotateX()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotateX()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotateX()</code></strong> définit une transformation qui déplace l'élément autour de l'axe des abscisses sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+
+<p><code>rotateX(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(1, 0, 0, a)</code>.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotateX(<em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotateX(45deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<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", "#funcdef-rotatex", "rotateX()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotatey()/index.html b/files/fr/web/css/transform-function/rotatey()/index.html
new file mode 100644
index 0000000000..86d43fd733
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotatey()/index.html
@@ -0,0 +1,108 @@
+---
+title: rotateY()
+slug: Web/CSS/transform-function/rotateY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotateY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotateY()</code></strong> définit une rotation, qui déplace l'élément autour de l'axe des ordonnées, sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+
+<p><code>rotateY(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(0, 1, 0, a)</code>.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotateY(<em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotateY(60deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<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", "#funcdef-rotatey", "rotateY()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotatez()/index.html b/files/fr/web/css/transform-function/rotatez()/index.html
new file mode 100644
index 0000000000..823e0355bc
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotatez()/index.html
@@ -0,0 +1,108 @@
+---
+title: rotateZ()
+slug: Web/CSS/transform-function/rotateZ()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotateZ()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotateZ()</code></strong> définit une transformation qui déplace l'élément autour de l'axe Z, sans déformer cet élément. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+
+<p><code>rotateZ(a)</code> est une notation raccourcie équivalente à <code>rotate3D(0, 0, 1, a)</code>.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotateZ(<em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotateZ(45deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<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", "#funcdef-rotatez", "rotateZ()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scale()/index.html b/files/fr/web/css/transform-function/scale()/index.html
new file mode 100644
index 0000000000..5010957fd3
--- /dev/null
+++ b/files/fr/web/css/transform-function/scale()/index.html
@@ -0,0 +1,157 @@
+---
+title: scale()
+slug: Web/CSS/transform-function/scale()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scale()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scale()</code></strong> permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p>
+
+<p>Cette transformation est définie par un vecteur dont les coordonnées définissent la déformation appliquée dans chaque direction (horizontale et verticale). Si les deux coordonnées du vecteur sont égales, la mise à l'échelle est uniforme (ou isotropique) et la forme de l'élément est conservée.</p>
+
+<p>Lorsque les coordonnées du vecteur sont en dehors de l'intervalle [<code>-1, 1]</code>, la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit.</p>
+
+<div class="note">La fonction <code>scale</code><code>()</code> applique un transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction <code>scale3D()</code> .</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">scale(<em>sx</em>)
+scale(<em>sx</em>, <em>sy</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe horizontal).</dd>
+ <dt><code>sy</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe vertical). Si ce paramètre est absent, la valeur par défaut qui sera prise sera <em><strong>sx</strong></em> (on aura ainsi une transformation homogène).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[sx 0 0 sy 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Déformation_horizontale">Déformation horizontale</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  /* identique à scaleX(2) scaleY(2)*/
+  transform: scale(2);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Déformation_horizontale","100%","200")}}</p>
+
+<h3 id="Déformer_horizontalement_et_verticalement_avec_origine_déplacée">Déformer horizontalement et verticalement avec origine déplacée</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  /* identique à scaleX(2) scaleY(0.5) */
+  transform: scale(2, 0.5);
+  transform-origin: left;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Déformer_horizontalement_et_verticalement_avec_origine_déplacée","100%","200")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les animations utilisées pour les zooms/changement d'échelle peuvent poser problème comme facteurs de déclenchement pour certains types de migraine. Si vous devez inclure de telles animations sur votre site, vous devriez fournir un moyen de désactiver les animations pour le site.</p>
+
+<p>Vous pouvez également tirer parti de la caractéristique média {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} et écrire une requête média qui désactivera les animations si l'utilisateur décide de réduire les animations via les préférences du système.</p>
+
+<p>Pour en savoir plus :</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">Comprendres les règles WCAG 2.3</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Comprendre les critères de succès WCAG 2.1 / 2.3.3 (W3C)</a></li>
+</ul>
+
+<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("CSS3 Transforms", "#funcdef-transform-scale", "scale()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-function/scale3d", "scale3d()")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scale3d()/index.html b/files/fr/web/css/transform-function/scale3d()/index.html
new file mode 100644
index 0000000000..cddec8bdc7
--- /dev/null
+++ b/files/fr/web/css/transform-function/scale3d()/index.html
@@ -0,0 +1,141 @@
+---
+title: scale3d()
+slug: Web/CSS/transform-function/scale3d()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scale3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scale3d()</code></strong> permet de modifier la taille d'un élément en appliquant une homothétie définie par un vecteur. Les composantes de ce vecteur permettent d'appliquer des échelles différentes selon les différentes dimensions.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-scale3d.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La transformation appliquée est définie par un vecteur dont les coordonnées définissent l'amplitude de l'homothétie dans chaque direction. Si les trois coordonnées du vecteur sont égales, la transformation est isotropique et la forme de l'élément est conservée.</p>
+
+<p>Lorsque les composantes du vecteurs sont en dehors de l'intervalle <code>[-1, 1]</code>, la transformation agrandit l'élément dans le sens des coordonnées. Lorsque les composantes sont dans cet intervalle, cela réduit l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'abscisse du vecteur définissant l'homothétie.</dd>
+ <dt><code>sy</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'ordonnée du vecteur définissant l'homothétie</dd>
+ <dt><code>sz</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente la composante, selon l'axe Z, du vecteur définissant l'homothétie</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans en 3 dimensions et ne peut pas être représentée sur le plan.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Avec_origine_non_modifiée">Avec origine non modifiée</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformation"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Avec_origine_non_modifiée","100%","200")}}</p>
+
+<h3 id="Avec_origine_translatée">Avec origine translatée</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scale3d(2, 3, 0);
+  transform-origin: center;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Avec_origine_translatée","100%","200")}}</p>
+
+<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", "#funcdef-scale3d", "scale3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scalex()/index.html b/files/fr/web/css/transform-function/scalex()/index.html
new file mode 100644
index 0000000000..231bc73da3
--- /dev/null
+++ b/files/fr/web/css/transform-function/scalex()/index.html
@@ -0,0 +1,139 @@
+---
+title: scaleX()
+slug: Web/CSS/transform-function/scaleX()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scaleX()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scaleX()</code></strong> permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p>
+
+<p><code>scaleX(sx)</code> est une notation raccourcie équivalente à <code>scale(sx, 1)</code> ou à <code>scale3d(sx, 1, 1)</code>.</p>
+
+<p><code>scaleX(-1)</code> définit une symétrie axiale par rapport à un axe vertical passant par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">scaleX(<em>s</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente le facteur d'échelle de l'homothétie.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[s 0 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Origine_inchangée">Origine inchangée</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scaleX(2);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Origine_inchangée","100%","200")}}</p>
+
+<h3 id="Origine_déplacée">Origine déplacée</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scaleX(2);
+  transform-origin: left;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Origine_déplacée","100%","200")}}</p>
+
+<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("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scaley()/index.html b/files/fr/web/css/transform-function/scaley()/index.html
new file mode 100644
index 0000000000..f8b82479b3
--- /dev/null
+++ b/files/fr/web/css/transform-function/scaley()/index.html
@@ -0,0 +1,111 @@
+---
+title: scaleY()
+slug: Web/CSS/transform-function/scaleY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scaleY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scaleY()</code></strong> modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12119/scaleY.png" style="height: 381px; width: 365px;"></p>
+
+<p><code>scaleY(sy)</code> est une notation raccourcie équivalente à <code>scale(1, sy)</code> ou à <code>scale3d(1, sy, 1)</code>.</p>
+
+<p><code>scaleY(-1)</code> définit une symétrie axiale selon un axe horizontal, passant par l'origine du repère (cette origine est définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">scaleY(s)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui indique le facteur d'échelle pour l'homothétie.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 s 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scaleY(2);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<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("CSS3 Transforms", "#funcdef-transform-scaley", "scaleY()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scalez()/index.html b/files/fr/web/css/transform-function/scalez()/index.html
new file mode 100644
index 0000000000..11324f1efb
--- /dev/null
+++ b/files/fr/web/css/transform-function/scalez()/index.html
@@ -0,0 +1,117 @@
+---
+title: scaleZ()
+slug: Web/CSS/transform-function/scaleZ()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scaleZ()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scaleZ()</code></strong> modifie la coordonnée en Z de chaque point de l'élément avec un facteur multiplicateur donné. Si ce facteur vaut 1, l'opération appliqué sera l'identité. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p><code>scaleZ(sz)</code> est une notation raccourcie équivalente à <code>scale3d(1, 1, sz)</code>.</p>
+
+<p><code>scaleZ(-1)</code> définit une symétrie axiale selon l'axe Z qui passe par l'origine (définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+
+<p>Dans les exemples interactifs ci-avant, <code>perspective: 500px;</code> a été utilisée afin de créer un espace en trois dimensions et <code>transform-style: preserve-3d</code> permet de positionner les éléments enfants dans cet espace 3D.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">scaleZ(s)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente le facteur d'échelle à appliquer sur la côte (coordonnées en Z) de chaque point de l'élément.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique sur l'espace en trois dimensions et ne peut donc être représentée sous la forme d'une transformation plane.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="translation"&gt;Translaté&lt;/p&gt;
+&lt;p class="homothetie"&gt;Échelle&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.translation{
+  /* On ajoute une perspective pour créer un volume 3D */
+  transform: perspective(500px) translateZ(100px);
+}
+
+.homothetie{
+  /* On ajoute une perspective pour créer un volume 3D */
+  transform: perspective(500px) scaleZ(2) translateZ(100px);
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<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", "#funcdef-scalez", "scaleZ()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/skew()/index.html b/files/fr/web/css/transform-function/skew()/index.html
new file mode 100644
index 0000000000..96a2973536
--- /dev/null
+++ b/files/fr/web/css/transform-function/skew()/index.html
@@ -0,0 +1,139 @@
+---
+title: skew()
+slug: Web/CSS/transform-function/skew()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/skew()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>skew()</code></strong> permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine, plus le décalage obtenu sera important.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">skew(<em>ax</em>)
+skew(<em>ax</em>, <em>ay</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>ax</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).</dd>
+ <dt><code>ay</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_une_distorsion_horizontale">Utiliser une distorsion horizontale</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+ /* the same as skewX(10deg); */
+  transform: skew(10deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_une_distorsion_horizontale","100%","200")}}</p>
+
+<h3 id="Utiliser_deux_angles">Utiliser deux angles</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: skew(10deg, 10deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_deux_angles","100%","200")}}</p>
+
+<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("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/skewx()/index.html b/files/fr/web/css/transform-function/skewx()/index.html
new file mode 100644
index 0000000000..2dde08e015
--- /dev/null
+++ b/files/fr/web/css/transform-function/skewx()/index.html
@@ -0,0 +1,110 @@
+---
+title: skewX()
+slug: Web/CSS/transform-function/skewX()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/skewX()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>skewX()</code></strong> permet d'opérer une distorsion horizontale en étirant chaque point de l'élément d'un certain angle dans la direction horizontale. Pour cela, on augmente l'abscisse d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skewX.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><code>skewX(a)</code> est équivalent à <code><a href="/fr/docs/Web/CSS/transform-function/skew">skew(a)</a></code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">skewX(a)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd></mtr><mtr>0<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 tan(a) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: skewX(10deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<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("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/skewy()/index.html b/files/fr/web/css/transform-function/skewy()/index.html
new file mode 100644
index 0000000000..bff12a7055
--- /dev/null
+++ b/files/fr/web/css/transform-function/skewy()/index.html
@@ -0,0 +1,108 @@
+---
+title: skewY()
+slug: Web/CSS/transform-function/skewY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/skewY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>skewY()</code></strong> permet d'opérer une distorsion verticale en étirant chaque point de l'élément d'un certain angle dans la direction verticale. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skewY.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">skewY(a)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(a) 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: skewY(40deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","250")}}</p>
+
+<h2 id="Specifications">Specifications</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("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translate()/index.html b/files/fr/web/css/transform-function/translate()/index.html
new file mode 100644
index 0000000000..4e1eb7e81a
--- /dev/null
+++ b/files/fr/web/css/transform-function/translate()/index.html
@@ -0,0 +1,141 @@
+---
+title: translate()
+slug: Web/CSS/transform-function/translate()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>translate()</code></strong> permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical).</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translate(tx)
+translate(tx, ty)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>tx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'abscisse du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement horizontal de la translation.</dd>
+ <dt><code>ty</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'ordonnée du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement vertical de la translation. Si ce paramètre n'est pas utilisé, la valeur par défaut sera 0 : <code>translate(2)</code> sera donc équivalent à <code>translate(2, 0)</code>.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Une translation plane n'est pas une transformation linéaire de ℝ<sup>2</sup> et ne peut donc pas être représentée sous la forme d'une matrice dans  le système cartésien.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_une_translation_horizontale">Définir une translation horizontale</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translate(10px);
+  /* équivalent à translateX(10px)*/
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_horizontale","100%","250")}}</p>
+
+<h3 id="Définir_une_translation_sur_les_deux_axes">Définir une translation sur les deux axes</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translate(10px,10px);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_sur_les_deux_axes","100%","250")}}</p>
+
+<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('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translate3d()/index.html b/files/fr/web/css/transform-function/translate3d()/index.html
new file mode 100644
index 0000000000..650c9b714f
--- /dev/null
+++ b/files/fr/web/css/transform-function/translate3d()/index.html
@@ -0,0 +1,140 @@
+---
+title: translate3d()
+slug: Web/CSS/transform-function/translate3d()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>translate3d()</code></strong> permet de déplacer un élément dans l'espace tridimensionnel. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent l'amplitude du déplacement pour chaque direction.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translate3d(tx, ty, tz)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>tx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal).</dd>
+ <dt><code>ty</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical).</dd>
+ <dt><code>tz</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type {{cssxref("&lt;percentage&gt;")}}, si c'est le cas, la règle décrivant la transformation sera considérée comme invalide.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur le plan.</p>
+   </td>
+   <td colspan="1" rowspan="2">Une translation n'est pas une transformation linéaire de ℝ<sup>3</sup> et ne peut donc pas être représentée par une matrice dans le système cartésien.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_une_translation_sur_un_seul_axe">Définir une translation sur un seul axe</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Statique&lt;/p&gt;
+&lt;p class="transformation"&gt;Bougé&lt;/p&gt;
+&lt;p&gt;Statique&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.transformation {
+  transform: perspective(500px) translate3d(10px,0px,0px);
+  /* equivalent to perspective(500px) translateX(10px)*/
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_sur_un_seul_axe","100%","250")}}</p>
+
+<h3 id="Définir_une_translation_sur_les_axes_X_et_Z">Définir une translation sur les axes X et Z</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Statique&lt;/p&gt;
+&lt;p class="transformation"&gt;Bougé&lt;/p&gt;
+&lt;p&gt;Statique&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.transformation {
+  transform: perspective(500px) translate3d(10px,0px,100px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_sur_les_axes_X_et_Z","100%","250")}}</p>
+
+<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", "#funcdef-translate3d", "translate3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translatex/index.html b/files/fr/web/css/transform-function/translatex/index.html
new file mode 100644
index 0000000000..76f583c665
--- /dev/null
+++ b/files/fr/web/css/transform-function/translatex/index.html
@@ -0,0 +1,109 @@
+---
+title: translateX()
+slug: Web/CSS/transform-function/translateX
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translateX
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <code><strong>translateX()</strong></code> permet de déplacer un élément horizontalement. Cette transformation est caractérisée par une longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du mouvement horizontal. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p>
+
+<p><code>translateX(tx)</code> est une notation raccourcie équivalente à <code>translate(tx, 0)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">translateX(t)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>t</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'abscisse (la coordonnée en X) du vecteur de translation.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Une translation n'est pas une transformation linéaire sur ℝ<sup>2</sup> et on ne peut donc pas la représenter en utilisant une matrice exprimée dans le système cartésien.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 t 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translateX(10px);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","250")}}</p>
+
+<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("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translatey()/index.html b/files/fr/web/css/transform-function/translatey()/index.html
new file mode 100644
index 0000000000..80ae24352c
--- /dev/null
+++ b/files/fr/web/css/transform-function/translatey()/index.html
@@ -0,0 +1,109 @@
+---
+title: translateY()
+slug: Web/CSS/transform-function/translateY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translateY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <code><strong>translateY()</strong></code> permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p>
+
+<p><code>translateY(ty)</code> est une notation raccourcie équivalente à <code>translate(0, ty)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translateY(t)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>t</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'ordonnée du vecteur de translation (la composante en Y).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Une translation n'est pas une transformation linéaire sur ℝ<sup>2</sup> et on ne peut donc pas la représenter en utilisant une matrice exprimée dans le système cartésien.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 0 t]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translateY(10px);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","250")}}</p>
+
+<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("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translatez()/index.html b/files/fr/web/css/transform-function/translatez()/index.html
new file mode 100644
index 0000000000..d55e4a1279
--- /dev/null
+++ b/files/fr/web/css/transform-function/translatez()/index.html
@@ -0,0 +1,113 @@
+---
+title: translateZ()
+slug: Web/CSS/transform-function/translateZ()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translateZ()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>translateZ()</code></strong> permet de déplacer un élément selon l'axe z de l'espace tridimensionnel. Cette transformation est caractérisée par une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p><code>translateZ(tz)</code> est un raccourci équivalent à <code>translate3d(0, 0, tz)</code>.</p>
+
+<p>Dans les exemples interactifs ci-avant, <code>perspective: 500px;</code> a été utilisée afin de créer un espace en trois dimensions et <code>transform-style: preserve-3d</code> permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translateZ(t)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>t</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type {{cssxref("&lt;percentage&gt;")}}, si c'est le cas, la propriété qui contient la transformation est considérée comme invalide.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur un plan.</td>
+   <td colspan="1" rowspan="2">Une translation n'est pas une transformation linéaire sur ℝ<sup>3</sup> et ne peut donc pas être représentée avec une matrice dans le système cartésien.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  /* On ajoute une perspective pour créer un */
+  /* espace 3D. L'utilisateur regarde « depuis »*/
+  /* 500px et on avance l'élément vers l'utili- */
+  /* sateur de 200px */
+  transform: perspective(500px) translateZ(200px);
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>Si la valeur fournie à <code>perspective()</code> est inférieure à l'argument de <code>translateZ()</code> (ex. <code>transform: perspective(200px) translateZ(300px);</code>), l'élément transformé ne sera pas visible car il sera situé au-delà de l'espace projeté sur l'écran. Plus l'écart entre ces deux arguments est faible, plus l'élément paraîtra proche de l'utilisateur.</p>
+
+<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', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Ajout des fonctions de transformations 3D au module standard <em>CSS Transforms</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY", "translateY()")}}</li>
+</ul>