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 --- .../fr/web/css/transform-function/scale()/index.md | 345 ++++++++------------- 1 file changed, 126 insertions(+), 219 deletions(-) (limited to 'files/fr/web/css/transform-function/scale()') diff --git a/files/fr/web/css/transform-function/scale()/index.md b/files/fr/web/css/transform-function/scale()/index.md index 8931d28027..bffb13cc70 100644 --- a/files/fr/web/css/transform-function/scale()/index.md +++ b/files/fr/web/css/transform-function/scale()/index.md @@ -7,37 +7,34 @@ tags: - CSS Transforms - Function - Reference -browser-compat: css.types.transform-function translation_of: Web/CSS/transform-function/scale() +browser-compat: css.types.transform-function --- -
{{CSSRef}}
+{{CSSRef}} -

La fonction scale() permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions. Le résultat de cette fonction est une valeur de type <transform-function>.

+La fonction **`scale()`** permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions. Le résultat de cette fonction est une valeur de type [``](/fr/docs/Web/CSS/transform-function). -

+![](scale.png) -

Cette transformation est définie par un vecteur dont les coordonnées définissent la déformation appliquée dans chaque direction (horizontale et verticale). Si les deux coordonnées du vecteur sont égales, la mise à l'échelle est uniforme (ou isotropique) et la forme de l'élément est conservée.

+Cette transformation est définie par un vecteur dont les coordonnées définissent la déformation appliquée dans chaque direction (horizontale et verticale). Si les deux coordonnées du vecteur sont égales, la mise à l'échelle est uniforme (ou isotropique) et la forme de l'élément est conservée. -

Lorsque les coordonnées du vecteur sont en dehors de l'intervalle [-1, 1], la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit.

+Lorsque les coordonnées du vecteur sont en dehors de l'intervalle \[`-1, 1]`, la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit. -
-

Note : La fonction scale() applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction scale3D().

-
+> **Note :** La fonction `scale()` applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction `scale3D()`. -

Syntaxe

+## Syntaxe -
scale(sx)
-scale(sx, sy)
-
+```css +scale(sx) +scale(sx, sy) +``` -

Valeurs

+### Valeurs -
-
sx
-
Une valeur de type <number> qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe horizontal).
-
sy
-
Une valeur de type <number> qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe vertical). Si ce paramètre est absent, la valeur par défaut qui sera prise sera sx (on aura ainsi une transformation homogène).
-
+- `sx` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe horizontal). +- `sy` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe vertical). Si ce paramètre est absent, la valeur par défaut qui sera prise sera **_sx_** (on aura ainsi une transformation homogène). @@ -50,168 +47,76 @@ scale(sx, sy) - - - - + + + + @@ -219,31 +124,32 @@ scale(sx, sy)
- - - - - sx - - - 0 - - - - - 0 - - - sy - - - - - - - - - - sx - - - 0 - - - 0 - - - - - 0 - - - sy - - - 0 - - - - - 0 - - - 0 - - - 1 - - - - - - - - - - sx - - - 0 - - - 0 - - - - - 0 - - - sy - - - 0 - - - - - 0 - - - 0 - - - 1 - - - - - - - - - - sx - - - 0 - - - 0 - - - 0 - - - - - 0 - - - sy - - - 0 - - - 0 - - - - - 0 - - - 0 - - - 1 - - - 0 - - - - - 0 - - - 0 - - - 0 - - - 1 - - - - - + sx 0 0 sy + + sx 0 0 0 sy 0 0 0 1 + + sx 0 0 0 sy 0 0 0 1 + + sx 0 0 0 0 sy 0 0 0 0 1 0 0 0 0 1 +
[sx 0 0 sy 0 0]
-

Accessibilité

+## Accessibilité -

Les animations utilisées pour les zooms/changement d'échelle peuvent poser problème comme facteurs de déclenchement pour certains types de migraine. Si vous devez inclure de telles animations sur votre site, vous devriez fournir un moyen de désactiver les animations pour le site.

+Les animations utilisées pour les zooms/changement d'échelle peuvent poser problème comme facteurs de déclenchement pour certains types de migraine. Si vous devez inclure de telles animations sur votre site, vous devriez fournir un moyen de désactiver les animations pour le site. -

Vous pouvez également tirer parti de la caractéristique média prefers-reduced-motion et écrire une requête média qui désactivera les animations si l'utilisateur décide de réduire les animations via les préférences du système.

+Vous pouvez également tirer parti de la caractéristique média [`prefers-reduced-motion`](/fr/docs/Web/CSS/@media/prefers-reduced-motion) et écrire une requête média qui désactivera les animations si l'utilisateur décide de réduire les animations via les préférences du système. -

Pour en savoir plus :

+Pour en savoir plus : - +- [Comprendres les règles WCAG 2.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%e2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions) +- [Comprendre les critères de succès WCAG 2.1 / 2.3.3 (W3C)](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) -

Exemples

+## Exemples -

Déformation horizontale et verticale

+### Déformation horizontale et verticale -

HTML

+#### HTML -
<div>Normal</div>
-<div class="scaled">Déformé</div>
+```html +
Normal
+
Déformé
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   width: 80px;
   height: 80px;
   background-color: skyblue;
@@ -253,22 +159,25 @@ scale(sx, sy)
   transform: scale(0.7); /* Équivalent à scaleX(0.7) scaleY(0.7) */
   background-color: pink;
 }
-
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("scaling_the_x_and_y_dimensions_together", "200", "200")}}

+{{EmbedLiveSample("scaling_the_x_and_y_dimensions_together", "200", "200")}} -

Déformer horizontalement et verticalement avec origine déplacée

+### Déformer horizontalement et verticalement avec origine déplacée -

HTML

+#### HTML -
<div>Normal</div>
-<div class="scaled">Déformé</div>
+```html +
Normal
+
Déformé
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   width: 80px;
   height: 80px;
   background-color: skyblue;
@@ -279,24 +188,22 @@ scale(sx, sy)
   transform-origin: left;
   background-color: pink;
 }
-
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("scaling_x_and_y_dimensions_separately_and_translating_the_origin", "200", "200")}}

+{{EmbedLiveSample("scaling_x_and_y_dimensions_separately_and_translating_the_origin", "200", "200")}} -

Spécifications

+## Spécifications -

{{Specifications}}

+{{Specifications}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat}}

+{{Compat}} -

Voir aussi

+## Voir aussi - +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) +- [`scale3d()`]() -- cgit v1.2.3-54-g00ecf