--- title: skew() slug: Web/CSS/transform-function/skew() tags: - CSS - Fonction - Reference - Transformations CSS translation_of: Web/CSS/transform-function/skew() ---

La fonction skew() permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. 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, plus le décalage obtenu sera important.

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

Syntaxe

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).
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).

Coordonnées cartésiennes sur ℝ²	Coordonnées homogènes sur ℝℙ²	Coordonnées cartésiennes sur ℝ³	Coordonnées homogènes sur ℝℙ³
$(\begin{matrix} 1 & tan(ax) \\ tan(ay) & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 \\ tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 \\ tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 & 0 \\ tan(ay) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} 1 & tan(ax) \\ tan(ay) & 1 \end{matrix})$	`[1 tan(ay) tan(ax) 1 0 0]`

Exemples

Utiliser une distorsion horizontale

HTML

<p>toto</p>
<p class="transformation">truc</p>

CSS

p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
 /* the same as skewX(10deg); */
  transform: skew(10deg);
  background-color: blue;
}

Résultat

{{EmbedLiveSample("Utiliser_une_distorsion_horizontale","100%","200")}}

Utiliser deux angles

HTML

<p>toto</p>
<p class="transformation">truc</p>

CSS

p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
  transform: skew(10deg, 10deg);
  background-color: blue;
}

Résultat

Spécifications

Spécification	État	Commentaires
{{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}	{{Spec2("CSS3 Transforms")}}	Définition initiale.

Compatibilité des navigateurs

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

Voir aussi

{{cssxref("transform")}}
{{cssxref("<transform-function>")}}