From c64852bbea5da39e12f76775e8018b0a56142e03 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Tue, 23 Nov 2021 13:42:53 +0100 Subject: Fixes #2805 - update of transform-function pages (#2834) * fixes #2805, updating scale() vs en-US w/ a few typos * missing typos * Update transform-function pages as well: rm cssxref, add compat frontmatter and spec/bcd macros --- .../fr/web/css/transform-function/skew()/index.md | 76 ++++++++++++---------- 1 file changed, 42 insertions(+), 34 deletions(-) (limited to 'files/fr/web/css/transform-function/skew()') diff --git a/files/fr/web/css/transform-function/skew()/index.md b/files/fr/web/css/transform-function/skew()/index.md index 11b994aa42..600ff281a9 100644 --- a/files/fr/web/css/transform-function/skew()/index.md +++ b/files/fr/web/css/transform-function/skew()/index.md @@ -1,12 +1,8 @@ --- title: skew() slug: Web/CSS/transform-function/skew() -tags: - - CSS - - Fonction - - Reference - - Transformations CSS translation_of: Web/CSS/transform-function/skew() +browser-compat: css.types.transform-function.skew --- {{CSSRef}} @@ -14,19 +10,24 @@ La fonction **`skew()`** permet d'opérer une distorsion en étirant chaque poin {{EmbedInteractiveExample("pages/css/function-skew.html")}} -La valeur obtenue par cette fonction est de type {{cssxref("<transform-function>")}}. +La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). ## Syntaxe - skew(ax) - skew(ax, ay) +La fonction `skew()` s'utilise avec une ou deux valeurs qui représente l'intensité de la distorsion appliquée dans chaque direction. Si une seule valeur est fournie, elle sera utilisée pour la distorsion sur l'axe horizontal et il n'y aura pas de distorsion verticale. + +```css +skew(ax) + +skew(ax, ay) +``` ### Valeurs - `ax` - - : Une valeur de type {{cssxref("<angle>")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal). + - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal). - `ay` - - : Une valeur de type {{cssxref("<angle>")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). + - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). @@ -98,23 +99,26 @@ La valeur obtenue par cette fonction est de type {{cssxref("<transform-functi #### HTML ```html -

toto

-

truc

+
Normal
+
Distordu
``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +body { + margin: 20px; } -.transformation { - /* the same as skewX(10deg); */ - transform: skew(10deg); - background-color: blue; +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg); /* Équivalent à skewX(10deg) */ + background-color: pink; } ``` @@ -127,22 +131,26 @@ p { #### HTML ```html -

toto

-

truc

+
Normal
+
Distordu
``` #### CSS ```css -p { - width: 50px; - height: 50px; - background-color: teal; +body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; } -.transformation { +.skewed { transform: skew(10deg, 10deg); - background-color: blue; + background-color: pink; } ``` @@ -152,15 +160,15 @@ p { ## Spécifications -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. | +{{Specifications}} ## Compatibilité des navigateurs -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. +{{Compat}} ## Voir aussi -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) +- [`skewX()`](/fr/docs/Web/CSS/transform-function/skewX()) +- [`skewY()`](/fr/docs/Web/CSS/transform-function/skewY()) -- cgit v1.2.3-54-g00ecf