diff options
Diffstat (limited to 'files/fr/web/css/transform-function')
21 files changed, 153 insertions, 176 deletions
diff --git a/files/fr/web/css/transform-function/index.html b/files/fr/web/css/transform-function/index.html index 152a9424d1..edcbd6edd3 100644 --- a/files/fr/web/css/transform-function/index.html +++ b/files/fr/web/css/transform-function/index.html @@ -17,27 +17,25 @@ translation_of: Web/CSS/transform-function <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><img src="coord_in_r2.png"></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>Pour <a 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><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><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> +<p><a href="https://fr.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Les coordonnées homogènes de Möbius</a> utilisées en <a 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> @@ -46,83 +44,73 @@ translation_of: Web/CSS/transform-function <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> + <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. <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> + <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> + <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> + <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> + <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")}}. <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")}}. <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")}}. <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> + <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> + <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> + <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")}}). <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")}}). <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")}}). <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> + <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> + <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> + <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> + <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> + <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("<length>")}} 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("<length>")}} 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("<length>")}} 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> + <dt><code><a href="/fr/docs/orphaned/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("<length>")}} qui définit la quantité de déplacement horizontal. <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("<length>")}} qui définit la quantité de déplacement vertical. <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("<length>")}} qui définit la quantité de déplacement. <code>translateZ(tz)</code> est une notation raccourcie pour <code>translate3d(0, 0, tz)</code>.</dd> </dl> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/css/transform-function/matrix()/index.html b/files/fr/web/css/transform-function/matrix()/index.html index 9e1068a7e0..1de0a89c3c 100644 --- a/files/fr/web/css/transform-function/matrix()/index.html +++ b/files/fr/web/css/transform-function/matrix()/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/transform-function/matrix() <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 class="syntaxbox">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> @@ -58,12 +58,12 @@ translation_of: Web/CSS/transform-function/matrix() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -100,13 +100,13 @@ translation_of: Web/CSS/transform-function/matrix() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></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 index 0f638286b7..3090f30633 100644 --- a/files/fr/web/css/transform-function/matrix3d()/index.html +++ b/files/fr/web/css/transform-function/matrix3d()/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/transform-function/matrix3d() <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> +<pre class="syntaxbox">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> @@ -24,7 +24,9 @@ translation_of: Web/CSS/transform-function/matrix3d() <dd>Les coefficients de type {{cssxref("<number>")}} qui définissent la translation à appliquer.</dd> </dl> -<div class="note"><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<length>")}} pour les coefficients <code>a4</code>, <code>b4</code> et <code>c4</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<length>")}} pour les coefficients <code>a4</code>, <code>b4</code> et <code>c4</code>.</p> +</div> <table class="standard-table"> <thead> @@ -50,12 +52,12 @@ translation_of: Web/CSS/transform-function/matrix3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -75,7 +77,7 @@ translation_of: Web/CSS/transform-function/matrix3d() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="foo"> +<pre class="brush: html"><div class="foo"> 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? @@ -84,7 +86,7 @@ translation_of: Web/CSS/transform-function/matrix3d() <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { width: 100%; } body { @@ -171,7 +173,7 @@ body { <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/perspective()/index.html b/files/fr/web/css/transform-function/perspective()/index.html index 0fb86405b6..bc9eb31839 100644 --- a/files/fr/web/css/transform-function/perspective()/index.html +++ b/files/fr/web/css/transform-function/perspective()/index.html @@ -15,13 +15,11 @@ translation_of: Web/CSS/transform-function/perspective() <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 class="syntaxbox">perspective(<var>l</var>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -57,7 +55,7 @@ translation_of: Web/CSS/transform-function/perspective() <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.face { +<pre class="brush: css">.face { position: absolute; width: 100px; height: 100px; @@ -102,7 +100,7 @@ p + div { <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>Sans perspective :</p> +<pre class="brush: html"><p>Sans perspective :</p> <div class="no-perspective-box"> <div class="face front">A</div> <div class="face top">B</div> @@ -149,7 +147,7 @@ p + div { <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotate()/index.html b/files/fr/web/css/transform-function/rotate()/index.html index eedbb8b131..4754dd3bbc 100644 --- a/files/fr/web/css/transform-function/rotate()/index.html +++ b/files/fr/web/css/transform-function/rotate()/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/transform-function/rotate() <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("<angle>")}}. 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 class="syntaxbox">rotate(<var>a</var>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,7 +56,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; @@ -70,7 +70,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="tourne">Tourné</div></pre> <h4 id="Résultat">Résultat</h4> @@ -83,7 +83,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { position: absolute; left: 40px; top: 40px; @@ -111,7 +111,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotate">Tourné</div> <div class="rotate-translate">Tourné puis translaté</div> <div class="translate-rotate">Translaté puis tourné</div> @@ -142,12 +142,12 @@ translation_of: Web/CSS/transform-function/rotate() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</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/rotate3d()/index.html b/files/fr/web/css/transform-function/rotate3d()/index.html index 29c8b92462..5086694692 100644 --- a/files/fr/web/css/transform-function/rotate3d()/index.html +++ b/files/fr/web/css/transform-function/rotate3d()/index.html @@ -14,15 +14,15 @@ translation_of: Web/CSS/transform-function/rotate3d() <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> +<div class="note"> + <p><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.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) +<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -51,7 +51,8 @@ translation_of: Web/CSS/transform-function/rotate3d() <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> + <td><a href="/fr/docs/Web/CSS/transform-function/rotate3d()/transform-functions-rotate3d_hom4.png"><img + src="transform-functions-rotate3d_hom4.png"></a></td> </tr> </tbody> </table> @@ -62,12 +63,12 @@ translation_of: Web/CSS/transform-function/rotate3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { perspective: 800px; } @@ -92,12 +93,12 @@ p { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -134,7 +135,7 @@ p { <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotatex()/index.html b/files/fr/web/css/transform-function/rotatex()/index.html index 01fc488e05..63b2dd46fa 100644 --- a/files/fr/web/css/transform-function/rotatex()/index.html +++ b/files/fr/web/css/transform-function/rotatex()/index.html @@ -14,17 +14,17 @@ translation_of: Web/CSS/transform-function/rotateX() <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> +<div class="note"> + <p><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.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotateX(<em>a</em>) +<pre class="syntaxbox">rotateX(<em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotateX() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +98,7 @@ translation_of: Web/CSS/transform-function/rotateX() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotatey()/index.html b/files/fr/web/css/transform-function/rotatey()/index.html index 86d43fd733..9af6c84d3a 100644 --- a/files/fr/web/css/transform-function/rotatey()/index.html +++ b/files/fr/web/css/transform-function/rotatey()/index.html @@ -14,17 +14,17 @@ translation_of: Web/CSS/transform-function/rotateY() <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> +<div class="note"> + <p><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.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotateY(<em>a</em>) +<pre class="syntaxbox">rotateY(<em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotateY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +98,7 @@ translation_of: Web/CSS/transform-function/rotateY() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/rotatez()/index.html b/files/fr/web/css/transform-function/rotatez()/index.html index 823e0355bc..25d3fbe461 100644 --- a/files/fr/web/css/transform-function/rotatez()/index.html +++ b/files/fr/web/css/transform-function/rotatez()/index.html @@ -14,17 +14,17 @@ translation_of: Web/CSS/transform-function/rotateZ() <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> +<div class="note"> + <p><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.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">rotateZ(<em>a</em>) +<pre class="syntaxbox">rotateZ(<em>a</em>) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotateZ() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +98,7 @@ translation_of: Web/CSS/transform-function/rotateZ() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/scale()/index.html b/files/fr/web/css/transform-function/scale()/index.html index 055515f169..8931d28027 100644 --- a/files/fr/web/css/transform-function/scale()/index.html +++ b/files/fr/web/css/transform-function/scale()/index.html @@ -20,7 +20,9 @@ translation_of: Web/CSS/transform-function/scale() <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="notecard note">La fonction <code>scale()</code> applique une 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> +<div class="note"> + <p><strong>Note :</strong> La fonction <code>scale()</code> applique une 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>.</p> +</div> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/css/transform-function/scale3d()/index.html b/files/fr/web/css/transform-function/scale3d()/index.html index cddec8bdc7..3b4d05dde4 100644 --- a/files/fr/web/css/transform-function/scale3d()/index.html +++ b/files/fr/web/css/transform-function/scale3d()/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transform-function/scale3d() <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> @@ -128,14 +126,14 @@ translation_of: Web/CSS/transform-function/scale3d() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</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> + <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 index 231bc73da3..6ad769f97c 100644 --- a/files/fr/web/css/transform-function/scalex()/index.html +++ b/files/fr/web/css/transform-function/scalex()/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/transform-function/scaleX() <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><img src="scalex.png"></p> <p><code>scaleX(sx)</code> est une notation raccourcie équivalente à <code>scale(sx, 1)</code> ou à <code>scale3d(sx, 1, 1)</code>.</p> @@ -126,13 +126,13 @@ translation_of: Web/CSS/transform-function/scaleX() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></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><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("<transform-function>")}}</li> <li>{{cssxref("transform-origin")}}</li> diff --git a/files/fr/web/css/transform-function/scaley()/index.html b/files/fr/web/css/transform-function/scaley()/index.html index f8b82479b3..87bfff06db 100644 --- a/files/fr/web/css/transform-function/scaley()/index.html +++ b/files/fr/web/css/transform-function/scaley()/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/transform-function/scaleY() <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("<transform-function>")}}.</p> -<p><img src="https://mdn.mozillademos.org/files/12119/scaleY.png" style="height: 381px; width: 365px;"></p> +<p><img src="scaley.png"></p> <p><code>scaleY(sy)</code> est une notation raccourcie équivalente à <code>scale(1, sy)</code> ou à <code>scale3d(1, sy, 1)</code>.</p> @@ -20,7 +20,7 @@ translation_of: Web/CSS/transform-function/scaleY() <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">scaleY(s) +<pre class="syntaxbox">scaleY(s) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/scaleY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,13 +98,13 @@ translation_of: Web/CSS/transform-function/scaleY() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></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><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("<transform-function>")}}</li> <li>{{cssxref("transform-origin")}}</li> diff --git a/files/fr/web/css/transform-function/scalez()/index.html b/files/fr/web/css/transform-function/scalez()/index.html index 11324f1efb..ee98a35e12 100644 --- a/files/fr/web/css/transform-function/scalez()/index.html +++ b/files/fr/web/css/transform-function/scalez()/index.html @@ -14,8 +14,6 @@ translation_of: Web/CSS/transform-function/scaleZ() <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> @@ -104,13 +102,13 @@ translation_of: Web/CSS/transform-function/scaleZ() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></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><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("<transform-function>")}}</li> <li>{{cssxref("transform-origin")}}</li> diff --git a/files/fr/web/css/transform-function/skew()/index.html b/files/fr/web/css/transform-function/skew()/index.html index 96a2973536..12d228ec71 100644 --- a/files/fr/web/css/transform-function/skew()/index.html +++ b/files/fr/web/css/transform-function/skew()/index.html @@ -14,13 +14,11 @@ translation_of: Web/CSS/transform-function/skew() <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("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">skew(<em>ax</em>) +<pre class="syntaxbox">skew(<em>ax</em>) skew(<em>ax</em>, <em>ay</em>) </pre> @@ -61,12 +59,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -87,12 +85,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -129,7 +127,7 @@ skew(<em>ax</em>, <em>ay</em>) <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/skewx()/index.html b/files/fr/web/css/transform-function/skewx()/index.html index 2dde08e015..5fefac8327 100644 --- a/files/fr/web/css/transform-function/skewx()/index.html +++ b/files/fr/web/css/transform-function/skewx()/index.html @@ -14,15 +14,13 @@ translation_of: Web/CSS/transform-function/skewX() <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("<transform-function>")}}.</p> -<p><code>skewX(a)</code> est équivalent à <code><a href="/fr/docs/Web/CSS/transform-function/skew">skew(a)</a></code>.</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 class="syntaxbox">skewX(a) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -58,12 +56,12 @@ translation_of: Web/CSS/transform-function/skewX() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -100,7 +98,7 @@ translation_of: Web/CSS/transform-function/skewX() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/skewy()/index.html b/files/fr/web/css/transform-function/skewy()/index.html index bff12a7055..06b1e83c24 100644 --- a/files/fr/web/css/transform-function/skewy()/index.html +++ b/files/fr/web/css/transform-function/skewy()/index.html @@ -14,13 +14,11 @@ translation_of: Web/CSS/transform-function/skewY() <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("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">skewY(a) +<pre class="syntaxbox">skewY(a) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,12 +54,12 @@ translation_of: Web/CSS/transform-function/skewY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -98,7 +96,7 @@ translation_of: Web/CSS/transform-function/skewY() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translate()/index.html b/files/fr/web/css/transform-function/translate()/index.html index 4e1eb7e81a..15604a6a3e 100644 --- a/files/fr/web/css/transform-function/translate()/index.html +++ b/files/fr/web/css/transform-function/translate()/index.html @@ -12,13 +12,13 @@ translation_of: Web/CSS/transform-function/translate() <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><img src="translate.png"></p> <p>La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">translate(tx) +<pre class="syntaxbox">translate(tx) translate(tx, ty) </pre> @@ -61,13 +61,13 @@ translate(tx, ty) <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p> <p>toto</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -88,13 +88,13 @@ translate(tx, ty) <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p> <p>toto</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -131,7 +131,7 @@ translate(tx, ty) <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translate3d()/index.html b/files/fr/web/css/transform-function/translate3d()/index.html index 650c9b714f..81d6f690e5 100644 --- a/files/fr/web/css/transform-function/translate3d()/index.html +++ b/files/fr/web/css/transform-function/translate3d()/index.html @@ -14,13 +14,11 @@ translation_of: Web/CSS/transform-function/translate3d() <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("<transform-function>")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">translate3d(tx, ty, tz) +<pre class="syntaxbox">translate3d(tx, ty, tz) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -60,13 +58,13 @@ translation_of: Web/CSS/transform-function/translate3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>Statique</p> +<pre class="brush: html"><p>Statique</p> <p class="transformation">Bougé</p> <p>Statique</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 60px; height: 60px; background-color: skyblue; @@ -87,13 +85,13 @@ translation_of: Web/CSS/transform-function/translate3d() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p>Statique</p> +<pre class="brush: html"><p>Statique</p> <p class="transformation">Bougé</p> <p>Statique</p></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 60px; height: 60px; background-color: skyblue; @@ -130,7 +128,7 @@ translation_of: Web/CSS/transform-function/translate3d() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translatey()/index.html b/files/fr/web/css/transform-function/translatey()/index.html index 80ae24352c..a6e0d052c0 100644 --- a/files/fr/web/css/transform-function/translatey()/index.html +++ b/files/fr/web/css/transform-function/translatey()/index.html @@ -12,13 +12,13 @@ translation_of: Web/CSS/transform-function/translateY() <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("<length>")}}) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> -<p><img src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p> +<p><img src="translatey.png"></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 class="syntaxbox">translateY(t) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -56,13 +56,13 @@ translation_of: Web/CSS/transform-function/translateY() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p> <p>toto</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -99,7 +99,7 @@ translation_of: Web/CSS/transform-function/translateY() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/css/transform-function/translatez()/index.html b/files/fr/web/css/transform-function/translatez()/index.html index d55e4a1279..3d2e30c77b 100644 --- a/files/fr/web/css/transform-function/translatez()/index.html +++ b/files/fr/web/css/transform-function/translatez()/index.html @@ -14,15 +14,13 @@ translation_of: Web/CSS/transform-function/translateZ() <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 class="syntaxbox">translateZ(t) </pre> <h3 id="Valeurs">Valeurs</h3> @@ -54,12 +52,12 @@ translation_of: Web/CSS/transform-function/translateZ() <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>toto</p> +<pre class="brush: html"><p>toto</p> <p class="transformation">truc</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 50px; height: 50px; background-color: teal; @@ -101,13 +99,13 @@ translation_of: Web/CSS/transform-function/translateZ() <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"><transform-function></a></code> pour les informations de compatibilité associées.</p> +<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{cssxref("<transform-function>")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Les transformations CSS</a></li> <li>{{cssxref("transform")}}</li> - <li>{{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY", "translateY()")}}</li> + <li>{{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY()", "translateY()")}}</li> </ul> |