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 --- files/fr/web/css/translate/index.md | 93 ++++++++++++++++--------------------- 1 file changed, 40 insertions(+), 53 deletions(-) (limited to 'files/fr/web/css/translate/index.md') diff --git a/files/fr/web/css/translate/index.md b/files/fr/web/css/translate/index.md index fe27ca5f8b..0016830cda 100644 --- a/files/fr/web/css/translate/index.md +++ b/files/fr/web/css/translate/index.md @@ -8,13 +8,14 @@ tags: - Reference translation_of: Web/CSS/translate --- -
{{CSSRef}}{{seecompattable}}
+{{CSSRef}}{{seecompattable}} -

La propriété translate permet de définir des opérations de translations, individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour transform.

+La propriété **`translate`** permet de définir des opérations de translations, individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour `transform`. -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 translate: none;
 
 /* Valeurs uniques */
@@ -27,36 +28,37 @@ translate: 50% 105px;
 
 /* Trois valeurs */
 translate: 50% 105px 5rem;
-
+``` -

Valeurs

+### Valeurs -
-
Une seule valeur de longueur/pourcentage ({{cssxref("<length-percentage>")}})
-
Une longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) qui définit une translation en deux dimensions. La translation est la même pour l'axe X et l'axe Y. Cela est équivalent à la fonction translate() (translation en deux dimensions) avec une seule valeur.
-
Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}})
-
Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction translate() appelée avec ces deux arguments.
-
Trois valeurs
-
Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) et une longueur ({{cssxref("<length>")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction translate3d() appelée avec ces trois arguments.
-
none
-
Cette valeur indique qu'aucune translation ne devrait être appliquée.
-
+- Une seule valeur de longueur/pourcentage ({{cssxref("<length-percentage>")}}) + - : Une longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) qui définit une translation en deux dimensions. La translation est la même pour l'axe X et l'axe Y. Cela est équivalent à la fonction `translate()` (translation en deux dimensions) avec une seule valeur. +- Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) + - : Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction `translate()` appelée avec ces deux arguments. +- Trois valeurs + - : Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) et une longueur ({{cssxref("<length>")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction `translate3d()` appelée avec ces trois arguments. +- `none` + - : Cette valeur indique qu'aucune translation ne devrait être appliquée. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

HTML

+### HTML -
<div>
-  <p class="translate">Translation</p>
-</div>
+```html +
+ 

Translation

+
+``` -

CSS

+### CSS -
* {
+```css
+* {
   box-sizing: border-box;
 }
 
@@ -85,41 +87,26 @@ p {
 div:hover .translate {
   translate: 200px 50px;
 }
-
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample('Exemples')}}

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

Spécifications

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.translate")}}

+{{Compat("css.properties.translate")}} -

Voir aussi

+## Voir aussi - +- {{cssxref('scale')}} +- {{cssxref('rotate')}} +- {{cssxref('transform')}} -- cgit v1.2.3-54-g00ecf