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/transform-origin/index.md | 326 ++++++++++++----------------- 1 file changed, 139 insertions(+), 187 deletions(-) (limited to 'files/fr/web/css/transform-origin') diff --git a/files/fr/web/css/transform-origin/index.md b/files/fr/web/css/transform-origin/index.md index d5c8888145..86a3c0a462 100644 --- a/files/fr/web/css/transform-origin/index.md +++ b/files/fr/web/css/transform-origin/index.md @@ -10,28 +10,27 @@ tags: - 'valeur par défaut : center' translation_of: Web/CSS/transform-origin --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété transform-origin permet de modifier l'origine du repère pour les opérations de transformation d'un élément.

+La propriété **`transform-origin`** permet de modifier l'origine du repère pour les opérations de transformation d'un élément. -
{{EmbedInteractiveExample("pages/css/transform-origin.html")}}
+{{EmbedInteractiveExample("pages/css/transform-origin.html")}} -

Par exemple, l'origine par défaut pour la fonction rotate() est le centre de la rotation. Cette propriété est utilisée en :

+Par exemple, l'origine par défaut pour la fonction `rotate()` est le centre de la rotation. Cette propriété est utilisée en : -
    -
  1. Translatant l'élément avec l'opposé de la valeur fournie
    2. -
  2. Appliquant la transformation souhaitée sur l'élément
    3. -
  3. Translatant l'élément avec la valeur fournie pour cette propriété.
    4. -
+1. Translatant l'élément avec l'opposé de la valeur fournie +2. Appliquant la transformation souhaitée sur l'élément +3. Translatant l'élément avec la valeur fournie pour cette propriété. -

Les valeurs qui ne sont pas définies explicitement sont réinitialisées avec les valeurs correspondantes.

+Les valeurs qui ne sont pas définies explicitement sont réinitialisées avec les valeurs correspondantes. -

Par défaut, l'origine d'une transformation est center.

+Par défaut, l'origine d'une transformation est `center`. -

Syntaxe

+## Syntaxe -
/* Utilisation d'une seule valeur */
-transform-origin: 2px;
+```css
+/* Utilisation d'une seule valeur */
+transform-origin: 2px;
 transform-origin: bottom;
 
 /* x-offset y-offset */
@@ -68,198 +67,167 @@ transform-origin: bottom right 2cm;
 transform-origin: inherit;
 transform-origin: initial;
 transform-origin: unset;
-
+``` + +La propriété `transform-origin` peut être définie en utiisant une, deux ou trois valeurs. + +- Avec une valeur, celle-ci doit être : + + - Une longueur (type {{cssxref("<length>")}}) + - Un pourcentage (type {{cssxref("<percentage>")}} + - Un mot-clé parmi `left`, `center`, `right`, `top`, `bottom`. + +- Avec deux valeurs + + - La première valeur doit être une longueur (type {{cssxref("<length>")}}), un pourcentage (type {{cssxref("<percentage>")}} ou un mot-clé parmi `left`, `center`, `right` + - La seconde valeur doit être une longueur (type {{cssxref("<length>")}}), un pourcentage (type {{cssxref("<percentage>")}} ou un mot-clé parmi `top`, `center`, `bottom`. + +- Avec trois valeurs -

La propriété transform-origin peut être définie en utiisant une, deux ou trois valeurs.

- - - -

Valeur

- -
-
x-offset
-
Une valeur du type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.
-
offset-keyword
-
Un mot-clé parmi left, right, top, bottom ou center qui décrit le décalage correspondant.
-
y-offset
-
Une valeur du type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.
-
x-offset-keyword
-
Un mot-clé parmi left, right ou center qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.
-
y-offset-keyword
-
Un mot-clé parmi top, bottom ou center qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.
-
z-offset
-
Une valeur du type {{cssxref("<length>")}} (et jamais une valeur du type {{cssxref("<percentage>")}}, sinon la déclaration serait invalide) qui décrit la distance, depuis l'œil de l'utilisateur, de l'origine de la transformation sur l'axe de profondeur (z)..
-
- -

Les mots-clés sont des raccourcis qui correspondent aux valeurs {{cssxref("<percentage>")}} suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mot-cléValeur
left0%
center50%
right100%
top0%
bottom100%
- -

Syntaxe formelle

+ - Les deux premières valeurs doivent être structurées comme la syntaxe avec deux valeurs + - La troisième valeur doit être une longueur (type {{cssxref("length")}} + +### Valeur + +- `x-offset` + - : Une valeur du type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée. +- `offset-keyword` + - : Un mot-clé parmi `left`, `right`, `top`, `bottom` ou `center` qui décrit le décalage correspondant. +- `y-offset` + - : Une valeur du type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée. +- `x-offset-keyword` + - : Un mot-clé parmi `left`, `right` ou `center` qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée. +- `y-offset-keyword` + - : Un mot-clé parmi `top`, `bottom` ou `center` qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée. +- `z-offset` + - : Une valeur du type {{cssxref("<length>")}} (et jamais une valeur du type {{cssxref("<percentage>")}}, sinon la déclaration serait invalide) qui décrit la distance, depuis l'œil de l'utilisateur, de l'origine de la transformation sur l'axe de profondeur (z).. + +Les mots-clés sont des raccourcis qui correspondent aux valeurs {{cssxref("<percentage>")}} suivantes : + +| Mot-clé | Valeur | +| -------- | ------ | +| `left` | `0%` | +| `center` | `50%` | +| `right` | `100%` | +| `top` | `0%` | +| `bottom` | `100%` | + +### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Voir la page sur l'utilisation des transformations CSS pour des exemples supplémentaires.

+Voir la page sur [l'utilisation des transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) pour des exemples supplémentaires. -

Illustrations des différentes valeurs de transform

+### Illustrations des différentes valeurs de transform -

Cet exemple illustre ce que donnent les différentes valeurs de transform-origin pour différentes fonctions de transformation.

+Cet exemple illustre ce que donnent les différentes valeurs de `transform-origin` pour différentes fonctions de transformation. - - -

{{EmbedLiveSample('a_demonstration_of_various_transform_values', '', 1350) }}

+{{EmbedLiveSample('a_demonstration_of_various_transform_values', '', 1350) }} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin')}}{{Spec2('CSS3 Transforms')}}Définition initiale.
+| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin')}} | {{Spec2('CSS3 Transforms')}} | Définition initiale. | -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.transform-origin")}}

+{{Compat("css.properties.transform-origin")}} -

Voir aussi

+## Voir aussi - +- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- -- cgit v1.2.3-54-g00ecf