diff options
Diffstat (limited to 'files/fr/web/css/translate/index.md')
| -rw-r--r-- | files/fr/web/css/translate/index.md | 93 |
1 files changed, 40 insertions, 53 deletions
diff --git a/files/fr/web/css/translate/index.md b/files/fr/web/css/translate/index.md index fe27ca5f8b..0016830cda 100644 --- a/files/fr/web/css/translate/index.md +++ b/files/fr/web/css/translate/index.md @@ -8,13 +8,14 @@ tags: - Reference translation_of: Web/CSS/translate --- -<div>{{CSSRef}}{{seecompattable}}</div> +{{CSSRef}}{{seecompattable}} -<p>La propriété <strong><code>translate</code></strong> permet de définir des opérations de translations, individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour <code>transform</code>.</p> +La propriété **`translate`** permet de définir des opérations de translations, individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour `transform`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */ +```css +/* Valeurs avec un mot-clé */ translate: none; /* Valeurs uniques */ @@ -27,36 +28,37 @@ translate: 50% 105px; /* Trois valeurs */ translate: 50% 105px 5rem; -</pre> +``` -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt>Une seule valeur de longueur/pourcentage ({{cssxref("<length-percentage>")}})</dt> - <dd>Une longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) qui définit une translation en deux dimensions. La translation est la même pour l'axe X et l'axe Y. Cela est équivalent à la fonction <code>translate()</code> (translation en deux dimensions) avec une seule valeur.</dd> - <dt>Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}})</dt> - <dd>Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction <code>translate()</code> appelée avec ces deux arguments.</dd> - <dt>Trois valeurs</dt> - <dd>Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) et une longueur ({{cssxref("<length>")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction <code>translate3d()</code> appelée avec ces trois arguments.</dd> - <dt><code>none</code></dt> - <dd>Cette valeur indique qu'aucune translation ne devrait être appliquée.</dd> -</dl> +- Une seule valeur de longueur/pourcentage ({{cssxref("<length-percentage>")}}) + - : Une longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) qui définit une translation en deux dimensions. La translation est la même pour l'axe X et l'axe Y. Cela est équivalent à la fonction `translate()` (translation en deux dimensions) avec une seule valeur. +- Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) + - : Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction `translate()` appelée avec ces deux arguments. +- Trois valeurs + - : Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) et une longueur ({{cssxref("<length>")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction `translate3d()` appelée avec ces trois arguments. +- `none` + - : Cette valeur indique qu'aucune translation ne devrait être appliquée. -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div> - <p class="translate">Translation</p> -</div></pre> +```html +<div> + <p class="translate">Translation</p> +</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">* { +```css +* { box-sizing: border-box; } @@ -85,41 +87,26 @@ p { div:hover .translate { translate: 200px 50px; } -</pre> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample('Exemples')}}</p> +{{EmbedLiveSample('Exemples')}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}} | {{Spec2('CSS Transforms 2')}} | Définition initiale. | -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.properties.translate")}}</p> +{{Compat("css.properties.translate")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{cssxref('scale')}}</li> - <li>{{cssxref('rotate')}}</li> - <li>{{cssxref('transform')}}</li> -</ul> +- {{cssxref('scale')}} +- {{cssxref('rotate')}} +- {{cssxref('transform')}} |