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/css_transforms/index.html | 60 ---------------- files/fr/web/css/css_transforms/index.md | 60 ++++++++++++++++ .../css_transforms/using_css_transforms/index.html | 84 ---------------------- .../css_transforms/using_css_transforms/index.md | 84 ++++++++++++++++++++++ 4 files changed, 144 insertions(+), 144 deletions(-) delete mode 100644 files/fr/web/css/css_transforms/index.html create mode 100644 files/fr/web/css/css_transforms/index.md delete mode 100644 files/fr/web/css/css_transforms/using_css_transforms/index.html create mode 100644 files/fr/web/css/css_transforms/using_css_transforms/index.md (limited to 'files/fr/web/css/css_transforms') diff --git a/files/fr/web/css/css_transforms/index.html b/files/fr/web/css/css_transforms/index.html deleted file mode 100644 index be8a54dc82..0000000000 --- a/files/fr/web/css/css_transforms/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: CSS Transforms -slug: Web/CSS/CSS_Transforms -tags: - - Aperçu - - CSS - - CSS Transforms - - Reference -translation_of: Web/CSS/CSS_Transforms ---- -
{{CSSRef}}
- -

Le module CSS Transforms (ou module des transformations CSS) est un module de la spécification CSS qui définit comment les éléments mis en forme avec CSS peuvent être transformés dans un espace à deux ou à trois dimensions.

- -

Référence

- -

Propriétés

- - - -

Types de donnée

- -

{{cssxref("<transform-function>")}}

- -

Guides

- -
-
Utiliser les transformations CSS
-
Un tutoriel pas-à-pas pour manipuler des transformations sur des éléments mis en forme avec CSS.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transforms')}}{{Spec2('CSS3 Transforms')}}Définition initiale.
diff --git a/files/fr/web/css/css_transforms/index.md b/files/fr/web/css/css_transforms/index.md new file mode 100644 index 0000000000..be8a54dc82 --- /dev/null +++ b/files/fr/web/css/css_transforms/index.md @@ -0,0 +1,60 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +tags: + - Aperçu + - CSS + - CSS Transforms + - Reference +translation_of: Web/CSS/CSS_Transforms +--- +
{{CSSRef}}
+ +

Le module CSS Transforms (ou module des transformations CSS) est un module de la spécification CSS qui définit comment les éléments mis en forme avec CSS peuvent être transformés dans un espace à deux ou à trois dimensions.

+ +

Référence

+ +

Propriétés

+ + + +

Types de donnée

+ +

{{cssxref("<transform-function>")}}

+ +

Guides

+ +
+
Utiliser les transformations CSS
+
Un tutoriel pas-à-pas pour manipuler des transformations sur des éléments mis en forme avec CSS.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transforms')}}{{Spec2('CSS3 Transforms')}}Définition initiale.
diff --git a/files/fr/web/css/css_transforms/using_css_transforms/index.html b/files/fr/web/css/css_transforms/using_css_transforms/index.html deleted file mode 100644 index e52bf437be..0000000000 --- a/files/fr/web/css/css_transforms/using_css_transforms/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Utilisation des transformations CSS -slug: Web/CSS/CSS_Transforms/Using_CSS_transforms -tags: - - 3D - - Avancé - - CSS - - Guide - - Mise à l'échelle - - Scale - - Transformations CSS - - perspective - - rotation -translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms -original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS ---- -
{{CSSRef}}
- -

En modifiant l'espace des coordonnées, les transformations CSS permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.

- -
-

Attention : Seuls les éléments positionnés selon le modèle de boîtes peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec display: block est positionné selon le modèle de boîtes.

-
- -

Propriétés des transformations CSS

- -

Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.

- -
-
{{cssxref("transform-origin")}}
-
Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.
-
{{cssxref("transform")}}
-
Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.
-
- -

Exemples

- -

Voici une version originale du logo MDN :

- -

MDN Logo

- -

Rotation

- -

Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :

- -
<img style="transform: rotate(90deg);
-            transform-origin: bottom left;"
-     src="screen_shot_2016-02-16_at_15.53.54.png">
-
- -

{{EmbedLiveSample('Rotation','auto',240)}}

- -

Distorsion et translation

- -

Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :

- -
<img style="transform: skewx(10deg) translatex(150px);
-            transform-origin: bottom left;"
-     src="screen_shot_2016-02-16_at_15.53.54.png">
-
- -

{{EmbedLiveSample('Distorsion_et_translation')}}

- -

Propriétés CSS spécifiques à la 3D

- -

Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.

- -

Définir une perspective

- -

Le premier élément à définir est la perspective. La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.

- -

{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}

- -

Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.

- -

{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_transforms/using_css_transforms/index.md b/files/fr/web/css/css_transforms/using_css_transforms/index.md new file mode 100644 index 0000000000..e52bf437be --- /dev/null +++ b/files/fr/web/css/css_transforms/using_css_transforms/index.md @@ -0,0 +1,84 @@ +--- +title: Utilisation des transformations CSS +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +tags: + - 3D + - Avancé + - CSS + - Guide + - Mise à l'échelle + - Scale + - Transformations CSS + - perspective + - rotation +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS +--- +
{{CSSRef}}
+ +

En modifiant l'espace des coordonnées, les transformations CSS permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.

+ +
+

Attention : Seuls les éléments positionnés selon le modèle de boîtes peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec display: block est positionné selon le modèle de boîtes.

+
+ +

Propriétés des transformations CSS

+ +

Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.

+ +
+
{{cssxref("transform-origin")}}
+
Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.
+
{{cssxref("transform")}}
+
Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.
+
+ +

Exemples

+ +

Voici une version originale du logo MDN :

+ +

MDN Logo

+ +

Rotation

+ +

Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="screen_shot_2016-02-16_at_15.53.54.png">
+
+ +

{{EmbedLiveSample('Rotation','auto',240)}}

+ +

Distorsion et translation

+ +

Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="screen_shot_2016-02-16_at_15.53.54.png">
+
+ +

{{EmbedLiveSample('Distorsion_et_translation')}}

+ +

Propriétés CSS spécifiques à la 3D

+ +

Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.

+ +

Définir une perspective

+ +

Le premier élément à définir est la perspective. La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.

+ +

{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}

+ +

Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.

+ +

{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}

+ +

Voir aussi

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