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-box/index.html | 106 ------------------------------ files/fr/web/css/transform-box/index.md | 106 ++++++++++++++++++++++++++++++ 2 files changed, 106 insertions(+), 106 deletions(-) delete mode 100644 files/fr/web/css/transform-box/index.html create mode 100644 files/fr/web/css/transform-box/index.md (limited to 'files/fr/web/css/transform-box') diff --git a/files/fr/web/css/transform-box/index.html b/files/fr/web/css/transform-box/index.html deleted file mode 100644 index a36d5b32c5..0000000000 --- a/files/fr/web/css/transform-box/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: transform-box -slug: Web/CSS/transform-box -tags: - - CSS - - Experimental - - Propriété - - Reference - - Transformations CSS -translation_of: Web/CSS/transform-box ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété transform-box définit la boîte à laquelle les propriétés {{cssxref("transform")}} et {{cssxref("transform-origin")}} font référence.

- -
/* Avec un mot-clé */
-transform-box: border-box;
-transform-box: fill-box;
-transform-box: view-box;
-
-/* Valeurs globales */
-transform-box: inherit;
-transform-box: initial;
-transform-box: unset;
-
- -

Syntaxe

- -

La propriété transform-box est définie grâce à l'un des mots-clés suivants.

- -

Valeurs

- -
-
border-box
-
La boîte de bordure (border) est utilisée comme boîte de référence. La boîte de référence d'un tableau est la boîte de bordure englobante (celle qui inclue les éventuelles légendes ou titres rattachés au tableau) et non uniquement celle autour du tableau.
-
fill-box
-
La boîte liée à l'objet est utilisée comme boîte de référence.
-
view-box
-
Le plus proche viewport {{Glossary("SVG")}} est utilisé comme boîte de référence. Si l'attribut {{SVGAttr("viewBox")}} est défini pour le viewport de l'élément, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut viewBox et les dimensions de la boîte de référence sont définies avec les valeurs de hauteur et largeur de l'attribut viewBox.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemple

- -

HTML

- -
<p class="premier">"I saw Mr. Hyde"</p>
-
-<p class="deuxieme">"Quite right, Mr. Utterson"</p>
- -

CSS

- -
p {
-  transform: rotate(90deg);
-  transform-origin: bottom left;
-  transform-box: border-box;
-}
-
-.premier {
-   border: 3px black solid;
-}
-
-.deuxieme {
-  border: 3px black solid;
-  padding: 3em;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemple","100%","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('CSS3 Transforms', '#transform-box', 'transform-box')}}{{Spec2('CSS3 Transforms')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/css/transform-box/index.md b/files/fr/web/css/transform-box/index.md new file mode 100644 index 0000000000..a36d5b32c5 --- /dev/null +++ b/files/fr/web/css/transform-box/index.md @@ -0,0 +1,106 @@ +--- +title: transform-box +slug: Web/CSS/transform-box +tags: + - CSS + - Experimental + - Propriété + - Reference + - Transformations CSS +translation_of: Web/CSS/transform-box +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété transform-box définit la boîte à laquelle les propriétés {{cssxref("transform")}} et {{cssxref("transform-origin")}} font référence.

+ +
/* Avec un mot-clé */
+transform-box: border-box;
+transform-box: fill-box;
+transform-box: view-box;
+
+/* Valeurs globales */
+transform-box: inherit;
+transform-box: initial;
+transform-box: unset;
+
+ +

Syntaxe

+ +

La propriété transform-box est définie grâce à l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
border-box
+
La boîte de bordure (border) est utilisée comme boîte de référence. La boîte de référence d'un tableau est la boîte de bordure englobante (celle qui inclue les éventuelles légendes ou titres rattachés au tableau) et non uniquement celle autour du tableau.
+
fill-box
+
La boîte liée à l'objet est utilisée comme boîte de référence.
+
view-box
+
Le plus proche viewport {{Glossary("SVG")}} est utilisé comme boîte de référence. Si l'attribut {{SVGAttr("viewBox")}} est défini pour le viewport de l'élément, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut viewBox et les dimensions de la boîte de référence sont définies avec les valeurs de hauteur et largeur de l'attribut viewBox.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemple

+ +

HTML

+ +
<p class="premier">"I saw Mr. Hyde"</p>
+
+<p class="deuxieme">"Quite right, Mr. Utterson"</p>
+ +

CSS

+ +
p {
+  transform: rotate(90deg);
+  transform-origin: bottom left;
+  transform-box: border-box;
+}
+
+.premier {
+   border: 3px black solid;
+}
+
+.deuxieme {
+  border: 3px black solid;
+  padding: 3em;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple","100%","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Transforms', '#transform-box', 'transform-box')}}{{Spec2('CSS3 Transforms')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

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