diff options
author | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
commit | 9bf6693b2edd5281c1577856895c55653a41dc01 (patch) | |
tree | 0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/fr/conflicting/web/css/transform-function/skewx/index.md | |
parent | 376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff) | |
download | translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.gz translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.bz2 translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.zip |
[CRON] sync translated content
Diffstat (limited to 'files/fr/conflicting/web/css/transform-function/skewx/index.md')
-rw-r--r-- | files/fr/conflicting/web/css/transform-function/skewx/index.md | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/files/fr/conflicting/web/css/transform-function/skewx/index.md b/files/fr/conflicting/web/css/transform-function/skewx/index.md new file mode 100644 index 0000000000..89cd5b762f --- /dev/null +++ b/files/fr/conflicting/web/css/transform-function/skewx/index.md @@ -0,0 +1,130 @@ +--- +title: skewY() +slug: conflicting/Web/CSS/transform-function/skewX +translation_of: Web/CSS/transform-function/skewY() +original_slug: Web/CSS/transform-function/skewY() +browser-compat: css.types.transform-function.skewY +--- +{{CSSRef}} + +La fonction **`skewY()`** permet d'opérer une distorsion verticale en étirant chaque point de l'élément d'un certain angle dans la direction verticale. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important. + +{{EmbedInteractiveExample("pages/css/function-skewY.html")}} + +La valeur obtenue par cette fonction est de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function). + +## Syntaxe + +```css +skewY(a) +``` + +### Valeurs + +- `a` + - : Une valeur de type [`<angle>`](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). + +<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>tan(ax)<mtd>1</mtd></mtr></mtable + ></mfenced + ></math + > + </td> + <td> + <math + ><mfenced + ><mtable + ><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr + ><mtr>tan(ax)<mtd>1</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>tan(ax)<mtd>1</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>tan(ax)<mtd>1</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 tan(a) 0 1 0 0]</code></td> + </tr> + </tbody> +</table> + +## Exemples + +### HTML + +```html +<div>Normal</div> +<div class="skewed">Distordu</div> +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skewY(40deg); + background-color: pink; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples","100%","250")}} + +## Specifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [`<transform-function>`](/fr/docs/Web/CSS/transform-function) |