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/skewy()/index.md | 155 ++++++++++++--------- 1 file changed, 91 insertions(+), 64 deletions(-) (limited to 'files/fr/web/css/transform-function/skewy()') diff --git a/files/fr/web/css/transform-function/skewy()/index.md b/files/fr/web/css/transform-function/skewy()/index.md index 06b1e83c24..a064f14624 100644 --- a/files/fr/web/css/transform-function/skewy()/index.md +++ b/files/fr/web/css/transform-function/skewy()/index.md @@ -8,58 +8,100 @@ tags: - Transformations CSS translation_of: Web/CSS/transform-function/skewY() --- -
{{CSSRef}}
+{{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.

+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")}}
+{{EmbedInteractiveExample("pages/css/function-skewY.html")}} -

La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}.

+La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. -

Syntaxe

+## Syntaxe -
skewY(a)
-
+ skewY(a) -

Valeurs

+### Valeurs -
-
a
-
Une valeur de type {{cssxref("<angle>")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).
-
+- `a` + - : Une valeur de type {{cssxref("<angle>")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
10tan(ax)1 100tan(ax)10001 100tan(ax)10001 1000tan(ax)10000100001
[1 tan(a) 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
+ 10tan(ax)1 + + 100tan(ax)10001 + + 100tan(ax)10001 + + 1000tan(ax)10000100001 +
[1 tan(a) 0 1 0 0]
-

Exemples

+## Exemples -

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;
@@ -69,38 +111,23 @@ translation_of: Web/CSS/transform-function/skewY()
   transform: skewY(40deg);
   background-color: blue;
 }
-
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples","100%","250")}}

+{{EmbedLiveSample("Exemples","100%","250")}} -

Specifications

+## Specifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}}{{Spec2("CSS3 Transforms")}}Définition initiale.
+| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}} | {{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 - +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} -- cgit v1.2.3-54-g00ecf