aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/transform-box
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:59:20 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch)
treea8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/transform-box
parent149319bb8c7b1394a443f0877c3460cd362aa815 (diff)
downloadtranslated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip
convert content to md
Diffstat (limited to 'files/fr/web/css/transform-box')
-rw-r--r--files/fr/web/css/transform-box/index.md90
1 files changed, 39 insertions, 51 deletions
diff --git a/files/fr/web/css/transform-box/index.md b/files/fr/web/css/transform-box/index.md
index a36d5b32c5..5215fbbe7b 100644
--- a/files/fr/web/css/transform-box/index.md
+++ b/files/fr/web/css/transform-box/index.md
@@ -9,11 +9,12 @@ tags:
- Transformations CSS
translation_of: Web/CSS/transform-box
---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
-<p>La propriété <strong><code>transform-box</code></strong> définit la boîte à laquelle les propriétés {{cssxref("transform")}} et {{cssxref("transform-origin")}} font référence.</p>
+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.
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
transform-box: border-box;
transform-box: fill-box;
transform-box: view-box;
@@ -22,38 +23,39 @@ transform-box: view-box;
transform-box: inherit;
transform-box: initial;
transform-box: unset;
-</pre>
+```
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<p>La propriété <code>transform-box</code> est définie grâce à l'un des mots-clés suivants.</p>
+La propriété `transform-box` est définie grâce à l'un des mots-clés suivants.
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
-<dl>
- <dt><code>border-box</code></dt>
- <dd>La boîte de bordure (<em>border</em>) 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.</dd>
- <dt><code>fill-box</code></dt>
- <dd>La boîte liée à l'objet est utilisée comme boîte de référence.</dd>
- <dt><code>view-box</code></dt>
- <dd>Le plus proche <em>viewport</em> {{Glossary("SVG")}} est utilisé comme boîte de référence. Si l'attribut {{SVGAttr("viewBox")}} est défini pour le <em>viewport</em> 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 <code>viewBox</code> et les dimensions de la boîte de référence sont définies avec les valeurs de hauteur et largeur de l'attribut <code>viewBox</code>.</dd>
-</dl>
+- `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`.
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
{{csssyntax}}
-<h2 id="Exemple">Exemple</h2>
+## Exemple
-<h3 id="HTML">HTML</h3>
+### HTML
-<pre class="brush: html">&lt;p class="premier"&gt;"I saw Mr. Hyde"&lt;/p&gt;
+```html
+<p class="premier">"I saw Mr. Hyde"</p>
-&lt;p class="deuxieme"&gt;"Quite right, Mr. Utterson"&lt;/p&gt;</pre>
+<p class="deuxieme">"Quite right, Mr. Utterson"</p>
+```
-<h3 id="CSS">CSS</h3>
+### CSS
-<pre class="brush: css">p {
+```css
+p {
transform: rotate(90deg);
transform-origin: bottom left;
transform-box: border-box;
@@ -66,41 +68,27 @@ transform-box: unset;
.deuxieme {
border: 3px black solid;
padding: 3em;
-}</pre>
+}
+```
-<h3 id="Résultat">Résultat</h3>
+### Résultat
-<p>{{EmbedLiveSample("Exemple","100%","300")}}</p>
+{{EmbedLiveSample("Exemple","100%","300")}}
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">Statut</th>
- <th scope="col">Commentaires</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS3 Transforms', '#transform-box', 'transform-box')}}</td>
- <td>{{Spec2('CSS3 Transforms')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | Statut | Commentaires |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Transforms', '#transform-box', 'transform-box')}} | {{Spec2('CSS3 Transforms')}} | Définition initiale. |
-<p>{{cssinfo}}</p>
+{{cssinfo}}
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("css.properties.transform-box")}}</p>
+{{Compat("css.properties.transform-box")}}
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("transform-origin")}}</li>
-</ul>
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS)
+- {{cssxref("transform")}}
+- {{cssxref("transform-origin")}}