diff options
Diffstat (limited to 'files/fr/web/css/transform-function/translatez()')
| -rw-r--r-- | files/fr/web/css/transform-function/translatez()/index.md | 133 |
1 files changed, 69 insertions, 64 deletions
diff --git a/files/fr/web/css/transform-function/translatez()/index.md b/files/fr/web/css/transform-function/translatez()/index.md index 3d2e30c77b..17aaab3ff3 100644 --- a/files/fr/web/css/transform-function/translatez()/index.md +++ b/files/fr/web/css/transform-function/translatez()/index.md @@ -8,56 +8,76 @@ tags: - Transformations CSS translation_of: Web/CSS/transform-function/translateZ() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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("<length>")}}) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> +La fonction **`translateZ()`** 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("<length>")}}) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. -<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div> +{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} -<p><code>translateZ(tz)</code> est un raccourci équivalent à <code>translate3d(0, 0, tz)</code>.</p> +`translateZ(tz)` est un raccourci équivalent à `translate3d(0, 0, tz)`. -<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> +Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée afin de créer un espace en trois dimensions et `transform-style: preserve-3d` permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">translateZ(t) -</pre> + translateZ(t) -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt><code>t</code></dt> - <dd>Une valeur de type {{cssxref("<length>")}} qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type {{cssxref("<percentage>")}}, si c'est le cas, la propriété qui contient la transformation est considérée comme invalide.</dd> -</dl> +- `t` + - : Une valeur de type {{cssxref("<length>")}} qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type {{cssxref("<percentage>")}}, si c'est le cas, la propriété qui contient la transformation est considérée comme invalide. <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> + <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> +## Exemples -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p>toto</p> -<p class="transformation">truc</p></pre> +```html +<p>toto</p> +<p class="transformation">truc</p> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">p { +```css +p { width: 50px; height: 50px; background-color: teal; @@ -70,42 +90,27 @@ translation_of: Web/CSS/transform-function/translateZ() /* sateur de 200px */ transform: perspective(500px) translateZ(200px); } -</pre> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples")}}</p> +{{EmbedLiveSample("Exemples")}} -<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> +Si la valeur fournie à `perspective()` est inférieure à l'argument de `translateZ()` (ex. `transform: perspective(200px) translateZ(300px);`), 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. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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> +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------- | +| {{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}} | {{Spec2('CSS Transforms 2')}} | Ajout des fonctions de transformations 3D au module standard _CSS Transforms_ | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<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> +Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{cssxref("<transform-function>")}}</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> -</ul> +- {{cssxref("<transform-function>")}} +- [Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- {{cssxref("transform")}} +- {{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY()", "translateY()")}} |