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/translate()/index.md | 189 ++++++++++++--------- 1 file changed, 108 insertions(+), 81 deletions(-) (limited to 'files/fr/web/css/transform-function/translate()') diff --git a/files/fr/web/css/transform-function/translate()/index.md b/files/fr/web/css/transform-function/translate()/index.md index 15604a6a3e..b832478484 100644 --- a/files/fr/web/css/transform-function/translate()/index.md +++ b/files/fr/web/css/transform-function/translate()/index.md @@ -8,66 +8,105 @@ tags: - Transformations CSS translation_of: Web/CSS/transform-function/translate() --- -
{{CSSRef}}
+{{CSSRef}} -

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

+La fonction **`translate()`** 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). -

+![](translate.png) -

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 -
translate(tx)
-translate(tx, ty)
-
+ translate(tx) + translate(tx, ty) -

Valeurs

+### Valeurs -
-
tx
-
Une valeur de type {{cssxref("<length>")}} qui représente l'abscisse du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement horizontal de la translation.
-
ty
-
Une valeur de type {{cssxref("<length>")}} qui représente l'ordonnée du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement vertical de la translation. Si ce paramètre n'est pas utilisé, la valeur par défaut sera 0 : translate(2) sera donc équivalent à translate(2, 0).
-
+- `tx` + - : Une valeur de type {{cssxref("<length>")}} qui représente l'abscisse du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement horizontal de la translation. +- `ty` + - : Une valeur de type {{cssxref("<length>")}} qui représente l'ordonnée du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement vertical de la translation. Si ce paramètre n'est pas utilisé, la valeur par défaut sera 0 : `translate(2)` sera donc équivalent à `translate(2, 0)`. - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
-

Une translation plane n'est pas une transformation linéaire de ℝ2 et ne peut donc pas être représentée sous la forme d'une matrice dans  le système cartésien.

- 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+

+ Une translation plane n'est pas une transformation linéaire de ℝ2 + et ne peut donc pas être représentée sous la forme d'une matrice dans  + le système cartésien. +

+ 		+ 10tx01ty001 + + 10tx01ty001 + + 100tx010ty00100001 +
[1 0 0 1 tx ty]
-

Exemples

+## Exemples -

Définir une translation horizontale

+### Définir une translation horizontale -

HTML

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

toto

+

truc

+

toto

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -78,23 +117,26 @@ translate(tx, ty)
   /* équivalent à translateX(10px)*/
   background-color: blue;
 }
-
+``` -

Résultat

+#### Résultat -

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

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

Définir une translation sur les deux axes

+### Définir une translation sur les deux axes -

HTML

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

toto

+

truc

+

toto

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -104,38 +146,23 @@ translate(tx, ty)
   transform: translate(10px,10px);
   background-color: blue;
 }
-
+``` -

Résultat

+#### Résultat -

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

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

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Définition initiale.
+| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}} | {{Spec2('CSS3 Transforms')}} | 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