diff options
Diffstat (limited to 'files/fr/web/css/transform-function/scaley()')
| -rw-r--r-- | files/fr/web/css/transform-function/scaley()/index.md | 163 |
1 files changed, 95 insertions, 68 deletions
diff --git a/files/fr/web/css/transform-function/scaley()/index.md b/files/fr/web/css/transform-function/scaley()/index.md index 87bfff06db..7b922436d8 100644 --- a/files/fr/web/css/transform-function/scaley()/index.md +++ b/files/fr/web/css/transform-function/scaley()/index.md @@ -8,60 +8,102 @@ tags: - Transformations CSS translation_of: Web/CSS/transform-function/scaleY() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La fonction <strong><code>scaleY()</code></strong> modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.</p> +La fonction **`scaleY()`** modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. -<p><img src="scaley.png"></p> + -<p><code>scaleY(sy)</code> est une notation raccourcie équivalente à <code>scale(1, sy)</code> ou à <code>scale3d(1, sy, 1)</code>.</p> +`scaleY(sy)` est une notation raccourcie équivalente à `scale(1, sy)` ou à `scale3d(1, sy, 1)`. -<p><code>scaleY(-1)</code> définit une symétrie axiale selon un axe horizontal, passant par l'origine du repère (cette origine est définie grâce à la propriété {{cssxref("transform-origin")}}).</p> +`scaleY(-1)` définit une symétrie axiale selon un axe horizontal, passant par l'origine du repère (cette origine est définie grâce à la propriété {{cssxref("transform-origin")}}). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">scaleY(s) -</pre> + scaleY(s) -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt><code>s</code></dt> - <dd>Une valeur de type {{cssxref("<number>")}} qui indique le facteur d'échelle pour l'homothétie.</dd> -</dl> +- `s` + - : Une valeur de type {{cssxref("<number>")}} qui indique le facteur d'échelle pour l'homothétie. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th> - <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th> - <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> - <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th> - </tr> - </thead> - <tbody> - <tr> - <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td> - <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> - <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> - <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> - </tr> - <tr> - <td><code>[1 0 0 s 0 0]</code></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th> + <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th> + <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> + <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr>1<mtd>0</mtd></mtr> + <mtr><mtd>0</mtd><mtd>s</mtd></mtr></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr + ><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr + ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable + ></mfenced + ></math + > + </td> + <td colspan="1" rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr + ><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr + ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable + ></mfenced + ></math + > + </td> + <td colspan="1" rowspan="2"> + <math + ><mfenced + ><mtable + ><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr + ><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr + ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr + ><mtr + ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr + ></mtable + ></mfenced + ></math + > + </td> + </tr> + <tr> + <td><code>[1 0 0 s 0 0]</code></td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p>toto</p> -<p class="transformation">truc</p></pre> +```html +<p>toto</p> +<p class="transformation">truc</p> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">p { +```css +p { width: 50px; height: 50px; background-color: teal; @@ -71,41 +113,26 @@ translation_of: Web/CSS/transform-function/scaleY() transform: scaleY(2); background-color: blue; } -</pre> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples","100%","200")}}</p> +{{EmbedLiveSample("Exemples","100%","200")}} -<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("CSS3 Transforms", "#funcdef-transform-scaley", "scaleY()")}}</td> - <td>{{Spec2("CSS3 Transforms")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName("CSS3 Transforms", "#funcdef-transform-scaley", "scaleY()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs"><transform-function></a></code> pour les informations de compatibilité associées.</p> +Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX()">scaleX()</a></code></li> - <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></li> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> - <li>{{cssxref("transform-origin")}}</li> -</ul> +- [`scaleX()`](</fr/docs/Web/CSS/transform-function/scaleX()>) +- [`scaleZ()`](</fr/docs/Web/CSS/transform-function/scaleZ()>) +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-origin")}} |