From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- .../css/transform-function/translatez()/index.md | 133 +++++++++++---------- 1 file changed, 69 insertions(+), 64 deletions(-) (limited to 'files/fr/web/css/transform-function/translatez()') 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() --- -
{{CSSRef}}
+{{CSSRef}} -

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>")}}.

+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>")}}. -
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
+{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} -

translateZ(tz) est un raccourci équivalent à translate3d(0, 0, tz).

+`translateZ(tz)` est un raccourci équivalent à `translate3d(0, 0, tz)`. -

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.

+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. -

Syntaxe

+## Syntaxe -
translateZ(t)
-
+ translateZ(t) -

Valeurs

+### Valeurs -
-
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.
-
+- `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. - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur un plan.Une translation n'est pas une transformation linéaire sur ℝ3 et ne peut donc pas être représentée avec une matrice dans le système cartésien. 10000100001t0001
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ Cette transformation s'applique en trois dimensions et ne peut donc être + représentée sur un plan. + + Une translation n'est pas une transformation linéaire sur ℝ3 + et ne peut donc pas être représentée avec une matrice dans le système + cartésien. + + 10000100001t0001 +
-

Exemples

+## Exemples -

HTML

+### HTML -
<p>toto</p>
-<p class="transformation">truc</p>
+```html +

toto

+

truc

+``` -

CSS

+### 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);
 }
-
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples")}}

+{{EmbedLiveSample("Exemples")}} -

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.

+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. -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Ajout des fonctions de transformations 3D au module standard CSS Transforms
+| 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_ | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Voir la page sur le type de donnée <transform-function> pour les informations de compatibilité associées.

+Voir la page sur le type de donnée [``](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. -

Voir aussi

+## Voir aussi - +- {{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()")}} -- cgit v1.2.3-54-g00ecf