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/css_transforms/index.md | 83 +++++++++------------- .../css_transforms/using_css_transforms/index.md | 78 ++++++++++---------- 2 files changed, 70 insertions(+), 91 deletions(-) (limited to 'files/fr/web/css/css_transforms') diff --git a/files/fr/web/css/css_transforms/index.md b/files/fr/web/css/css_transforms/index.md index be8a54dc82..5e7b91af1c 100644 --- a/files/fr/web/css/css_transforms/index.md +++ b/files/fr/web/css/css_transforms/index.md @@ -8,53 +8,36 @@ tags: - 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.
+{{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 + +- {{cssxref("backface-visibility")}} +- {{cssxref("perspective")}} +- {{cssxref("perspective-origin")}} +- {{cssxref("rotate")}} +- {{cssxref("scale")}} +- {{cssxref("transform")}} +- {{cssxref("transform-box")}} +- {{cssxref("transform-origin")}} +- {{cssxref("transform-style")}} +- {{cssxref("translate")}} + +### Types de donnée + +{{cssxref("<transform-function>")}} + +## Guides + +- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) + - : Un tutoriel pas-à-pas pour manipuler des transformations sur des éléments mis en forme avec CSS. + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('CSS3 Transforms')}} | {{Spec2('CSS3 Transforms')}} | Définition initiale. | 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 index e52bf437be..2b121224ea 100644 --- a/files/fr/web/css/css_transforms/using_css_transforms/index.md +++ b/files/fr/web/css/css_transforms/using_css_transforms/index.md @@ -14,71 +14,67 @@ tags: translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS --- -
{{CSSRef}}
+{{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.

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

-
+> **Attention :** Seuls les éléments positionnés selon [le modèle de boîtes](/fr/docs/Web/CSS/CSS_Box_Model) 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

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

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

+## Exemples -

Voici une version originale du logo MDN :

+Voici une version originale du logo MDN : -

MDN Logo

+![MDN Logo](screen_shot_2016-02-16_at_15.53.54.png) -

Rotation

+### Rotation -

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

+Ici, on le tourne de 90 degrés depuis le coin inférieur gauche : -
<img style="transform: rotate(90deg);
+```html
+
+     src="screen_shot_2016-02-16_at_15.53.54.png">
+```
 
-
{{EmbedLiveSample('Rotation','auto',240)}}

+{{EmbedLiveSample('Rotation','auto',240)}}
 
-
Distorsion et translation

+### 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 :

+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);
+```html
+
+     src="screen_shot_2016-02-16_at_15.53.54.png">
+```
 
-
{{EmbedLiveSample('Distorsion_et_translation')}}

+{{EmbedLiveSample('Distorsion_et_translation')}}
 
-
Propriétés CSS spécifiques à la 3D

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

+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

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

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

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

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

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

+## Voir aussi
 
-
+- [Utiliser `deviceorientation` avec les transformations 3D](/fr/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms "Using Deviceorientation with 3D Transforms")
+- [Une introduction aux transformations CSS, un billet de David DeSandro (en anglais)](https://desandro.github.com/3dtransforms/)
+- [CSS Transform playground (outil en ligne qui permet de visualiser des transformations CSS)](https://css-transform.moro.es/)
-- 
cgit v1.2.3-54-g00ecf