From c64852bbea5da39e12f76775e8018b0a56142e03 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Tue, 23 Nov 2021 13:42:53 +0100 Subject: Fixes #2805 - update of transform-function pages (#2834) * fixes #2805, updating scale() vs en-US w/ a few typos * missing typos * Update transform-function pages as well: rm cssxref, add compat frontmatter and spec/bcd macros --- .../css/transform-function/translate()/index.md | 85 +++++++++++----------- 1 file changed, 43 insertions(+), 42 deletions(-) (limited to 'files/fr/web/css/transform-function/translate()/index.md') diff --git a/files/fr/web/css/transform-function/translate()/index.md b/files/fr/web/css/transform-function/translate()/index.md index b832478484..c51a505285 100644 --- a/files/fr/web/css/transform-function/translate()/index.md +++ b/files/fr/web/css/transform-function/translate()/index.md @@ -1,12 +1,8 @@ --- title: translate() slug: Web/CSS/transform-function/translate() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/translate() +browser-compat: css.types.transform-function.translate --- {{CSSRef}} @@ -14,26 +10,34 @@ La fonction **`translate()`** permet de déplacer un élément sur le plan repr ![](translate.png) -La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. +La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). ## Syntaxe - translate(tx) - translate(tx, ty) - +```css +/* Avec une seule valeur */ +transform: translate(200px); +transform: translate(50%); + +/* Avec deux valeurs */ +transform: translate(100px, 200px); +transform: translate(100px, 50%); +transform: translate(30%, 200px); +transform: translate(30%, 50%); +``` ### 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)`. +- Avec une seule valeur `` + - : Cette valeur est de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) et représente l'abscisse (la coordonnée horizontale) du vecteur de translation. La composante verticale du vecteur de translation sera nulle. Ainsi, `translate(2px)` est équivalent à `translate(2px, 0)`. Une valeur en pourcentage sera relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). +- Avec deux valeurs `` + - : Ces valeurs sont de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) et décrivent respectivement l'abscisse (la coordonnée horizontale) et l'ordonnée (la coordonnée verticale) du vecteur de translation. Un premier pourcentage sera relatif à la largeur de la boîte de référence et un deuxième pourcentage sera relatif à sa hauteur (la boîte de référence étant définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box)). - + @@ -44,7 +48,7 @@ La valeur obtenue par cette fonction est de type {{cssxref("<transform-functi 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  + et ne peut donc pas être représentée sous la forme d'une matrice dans le système cartésien.

@@ -98,24 +102,23 @@ La valeur obtenue par cette fonction est de type {{cssxref("<transform-functi #### HTML ```html -

toto

-

truc

-

toto

+
Statique
+
Déplacé
+
Statique
``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 60px; + height: 60px; + background-color: skyblue; } -.transformation { - transform: translate(10px); - /* équivalent à translateX(10px)*/ - background-color: blue; +.moved { + transform: translate(10px); /* Équivalent à : translateX(10px) ou translate(10px, 0) */ + background-color: pink; } ``` @@ -128,23 +131,23 @@ p { #### HTML ```html -

toto

-

truc

-

toto

+
Statique
+
Déplacé
+
Statique
``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +div { + width: 60px; + height: 60px; + background-color: skyblue; } -.transformation { - transform: translate(10px,10px); - background-color: blue; +.moved { + transform: translate(10px, 10px); + background-color: pink; } ``` @@ -154,15 +157,13 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}} | {{Spec2('CSS3 Transforms')}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -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. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) -- cgit v1.2.3-54-g00ecf
Coordonnées cartésiennes sur ℝ2 Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées cartésiennes sur ℝ3 Coordonnées homogènes sur ℝℙ3