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 --- .../web/css/transform-function/scalex()/index.md | 186 ++++++++++++--------- 1 file changed, 108 insertions(+), 78 deletions(-) (limited to 'files/fr/web/css/transform-function/scalex()') diff --git a/files/fr/web/css/transform-function/scalex()/index.md b/files/fr/web/css/transform-function/scalex()/index.md index 6ad769f97c..9a1b98907c 100644 --- a/files/fr/web/css/transform-function/scalex()/index.md +++ b/files/fr/web/css/transform-function/scalex()/index.md @@ -8,62 +8,104 @@ tags: - Transformations CSS translation_of: Web/CSS/transform-function/scaleX() --- -
{{CSSRef}}
+{{CSSRef}} -

La fonction scaleX() permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés.

+La fonction **`scaleX()`** permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés. -

+![](scalex.png) -

scaleX(sx) est une notation raccourcie équivalente à scale(sx, 1) ou à scale3d(sx, 1, 1).

+`scaleX(sx)` est une notation raccourcie équivalente à `scale(sx, 1)` ou à `scale3d(sx, 1, 1)`. -

scaleX(-1) définit une symétrie axiale par rapport à un axe vertical passant par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}).

+`scaleX(-1)` définit une symétrie axiale par rapport à un axe vertical passant par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}). -

Syntaxe

+## Syntaxe -
scaleX(s)
-
+ scaleX(s) -

Valeurs

+### Valeurs -
-
s
-
Une valeur de type {{cssxref("<number>")}} qui représente le facteur d'échelle de l'homothétie.
-
+- `s` + - : Une valeur de type {{cssxref("<number>")}} qui représente le facteur d'échelle de l'homothétie. - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ s0 + 01 + + s00010001 + + s00010001 + + s000010000100001 +
[s 0 0 1 0 0]
-

Exemples

+## Exemples -

Origine inchangée

+### Origine inchangée -

HTML

+#### HTML -
<p>toto</p>
-<p class="transformation">truc</p>
+```html +

toto

+

truc

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -73,22 +115,25 @@ translation_of: Web/CSS/transform-function/scaleX()
   transform: scaleX(2);
   background-color: blue;
 }
-
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Origine_inchangée","100%","200")}}

+{{EmbedLiveSample("Origine_inchangée","100%","200")}} -

Origine déplacée

+### Origine déplacée -

HTML

+#### HTML -
<p>toto</p>
-<p class="transformation">bar</p>
+```html +

toto

+

bar

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -99,41 +144,26 @@ translation_of: Web/CSS/transform-function/scaleX()
   transform-origin: left;
   background-color: blue;
 }
-
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("Origine_déplacée","100%","200")}}

+{{EmbedLiveSample("Origine_déplacée","100%","200")}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}{{Spec2("CSS3 Transforms")}}Définition initiale
+| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- | +| {{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Voir la page sur le type de donnée <transform-function> pour les informations de compatibilité associées.

+Voir la page sur le type de donnée [``](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. -

Voir aussi

+## Voir aussi - +- [`scaleY()`]() +- [`scaleZ()`]() +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-origin")}} -- cgit v1.2.3-54-g00ecf