From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/transform-origin/index.html | 369 --------------------------- files/fr/web/css/transform-origin/index.md | 369 +++++++++++++++++++++++++++ 2 files changed, 369 insertions(+), 369 deletions(-) delete mode 100644 files/fr/web/css/transform-origin/index.html create mode 100644 files/fr/web/css/transform-origin/index.md (limited to 'files/fr/web/css/transform-origin') diff --git a/files/fr/web/css/transform-origin/index.html b/files/fr/web/css/transform-origin/index.html deleted file mode 100644 index d5c8888145..0000000000 --- a/files/fr/web/css/transform-origin/index.html +++ /dev/null @@ -1,369 +0,0 @@ ---- -title: transform-origin -slug: Web/CSS/transform-origin -tags: - - CSS - - CSS Transoforms - - Propriété CSS - - Reference - - transform-origin - - 'valeur par défaut : center' -translation_of: Web/CSS/transform-origin ---- -
{{CSSRef}}
- -

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")}}
- -

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. -
- -

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.

- -

Syntaxe

- -
/* Utilisation d'une seule valeur */
-transform-origin: 2px;
-transform-origin: bottom;
-
-/* x-offset y-offset */
-transform-origin: 3cm 2px;
-
-/* y-offset x-offset-keyword */
-transform-origin: 2px left;
-
-/* x-offset-keyword y-offset */
-transform-origin: left 2px;
-
-/* x-offset-keyword y-offset-keyword */
-transform-origin: right top;
-
-/* y-offset-keyword x-offset-keyword */
-transform-origin: top right;
-
-/* x-offset y-offset z-offset */
-transform-origin: 2px 30% 10px;
-
-/* y-offset x-offset-keyword z-offset */
-transform-origin: 2px left 10px;
-
-/* x-offset-keyword y-offset z-offset */
-transform-origin: left 5px -3px;
-
-/* x-offset-keyword y-offset-keyword z-offset */
-transform-origin: right bottom 2cm;
-
-/* y-offset-keyword x-offset-keyword z-offset */
-transform-origin: bottom right 2cm;
-
-/* Valeurs globales */
-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.

- - - -

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

- -{{csssyntax}} - -

Exemples

- -

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

- -

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.

- - - - - -

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

- -

Spécifications

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

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/css/transform-origin/index.md b/files/fr/web/css/transform-origin/index.md new file mode 100644 index 0000000000..d5c8888145 --- /dev/null +++ b/files/fr/web/css/transform-origin/index.md @@ -0,0 +1,369 @@ +--- +title: transform-origin +slug: Web/CSS/transform-origin +tags: + - CSS + - CSS Transoforms + - Propriété CSS + - Reference + - transform-origin + - 'valeur par défaut : center' +translation_of: Web/CSS/transform-origin +--- +
{{CSSRef}}
+ +

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")}}
+ +

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. +
+ +

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.

+ +

Syntaxe

+ +
/* Utilisation d'une seule valeur */
+transform-origin: 2px;
+transform-origin: bottom;
+
+/* x-offset y-offset */
+transform-origin: 3cm 2px;
+
+/* y-offset x-offset-keyword */
+transform-origin: 2px left;
+
+/* x-offset-keyword y-offset */
+transform-origin: left 2px;
+
+/* x-offset-keyword y-offset-keyword */
+transform-origin: right top;
+
+/* y-offset-keyword x-offset-keyword */
+transform-origin: top right;
+
+/* x-offset y-offset z-offset */
+transform-origin: 2px 30% 10px;
+
+/* y-offset x-offset-keyword z-offset */
+transform-origin: 2px left 10px;
+
+/* x-offset-keyword y-offset z-offset */
+transform-origin: left 5px -3px;
+
+/* x-offset-keyword y-offset-keyword z-offset */
+transform-origin: right bottom 2cm;
+
+/* y-offset-keyword x-offset-keyword z-offset */
+transform-origin: bottom right 2cm;
+
+/* Valeurs globales */
+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.

+ + + +

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

+ +{{csssyntax}} + +

Exemples

+ +

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

+ +

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.

+ + + + + +

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

+ +

Spécifications

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

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf