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/translate3d()/index.md | 164 +++++++++++---------- 1 file changed, 86 insertions(+), 78 deletions(-) (limited to 'files/fr/web/css/transform-function/translate3d()') diff --git a/files/fr/web/css/transform-function/translate3d()/index.md b/files/fr/web/css/transform-function/translate3d()/index.md index 81d6f690e5..3e36281947 100644 --- a/files/fr/web/css/transform-function/translate3d()/index.md +++ b/files/fr/web/css/transform-function/translate3d()/index.md @@ -8,63 +8,83 @@ tags: - Transformations CSS translation_of: Web/CSS/transform-function/translate3d() --- -
{{CSSRef}}
+{{CSSRef}} -

La fonction CSS translate3d() 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.

+La fonction CSS **`translate3d()`** 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. -
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
+{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} -

La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.

+La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. -

Syntaxe

+## Syntaxe -
translate3d(tx, ty, tz)
-
+ translate3d(tx, ty, tz) -

Valeurs

+### Valeurs -
-
tx
-
Une valeur de type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal).
-
ty
-
Une valeur de type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical).
-
tz
-
Une valeur de type {{cssxref("<length>")}} 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("<percentage>")}}, si c'est le cas, la règle décrivant la transformation sera considérée comme invalide.
-
+- `tx` + - : Une valeur de type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). +- `ty` + - : Une valeur de type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). +- `tz` + - : Une valeur de type {{cssxref("<length>")}} 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("<percentage>")}}, si c'est le cas, la règle décrivant la transformation sera 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 le plan.

- 		Une translation n'est pas une transformation linéaire de ℝ3 et ne peut donc pas être représentée par une matrice dans le système cartésien. 100tx010ty001tz0001
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 le plan. +

+ 		+ Une translation n'est pas une transformation linéaire de ℝ3 + et ne peut donc pas être représentée par une matrice dans le système + cartésien. + + 100tx010ty001tz0001 +
-

Exemples

+## Exemples -

Définir une translation sur un seul axe

+### Définir une translation sur un seul axe -

HTML

+#### HTML -
<p>Statique</p>
-<p class="transformation">Bougé</p>
-<p>Statique</p>
+```html +

Statique

+

Bougé

+

Statique

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   width: 60px;
   height: 60px;
   background-color: skyblue;
@@ -75,23 +95,26 @@ translation_of: Web/CSS/transform-function/translate3d()
   /* equivalent to perspective(500px) translateX(10px)*/
   background-color: pink;
 }
-
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Définir_une_translation_sur_un_seul_axe","100%","250")}}

+{{EmbedLiveSample("Définir_une_translation_sur_un_seul_axe","100%","250")}} -

Définir une translation sur les axes X et Z

+### Définir une translation sur les axes X et Z -

HTML

+#### HTML -
<p>Statique</p>
-<p class="transformation">Bougé</p>
-<p>Statique</p>
+```html +

Statique

+

Bougé

+

Statique

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   width: 60px;
   height: 60px;
   background-color: skyblue;
@@ -101,38 +124,23 @@ translation_of: Web/CSS/transform-function/translate3d()
   transform: perspective(500px) translate3d(10px,0px,100px);
   background-color: pink;
 }
-
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Définir_une_translation_sur_les_axes_X_et_Z","100%","250")}}

+{{EmbedLiveSample("Définir_une_translation_sur_les_axes_X_et_Z","100%","250")}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Définition initiale.
+| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. | -

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")}} +- {{cssxref("<transform-function>")}} -- cgit v1.2.3-54-g00ecf