Fonction CSS skew()

Exemple interactif

transform: skew(0);

transform: skew(15deg, 15deg);

transform: skew(-0.06turn, 18deg);

transform: skew(0.312rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Cette transformation est une application de cisaillement (transvection) qui dforme chaque point d'un lment selon un certain angle dans les directions horizontale et verticale. L'effet est similaire celui d'tirer chaque coin de l'lment selon un certain angle.

Les coordonnes de chaque point sont modifies d'une valeur proportionnelle l'angle dfini et la distance l'origine. Ainsi, plus un point est loign de l'origine, plus la valeur ajoute est grande.

Syntaxe

skew(ax)

skew(ax, ay)

Valeurs

ax

Est un <angle> reprsentant l'angle utiliser pour incliner l'lment selon l'axe des abscisses (x).

ay Facultatif

Est un <angle> reprsentant l'angle utiliser pour incliner l'lment selon l'axe des ordonnes (y). Si non dfini, sa valeur par dfaut est 0, ce qui donne un cisaillement purement horizontal.

Syntaxe formelle

<skew()> = 
  skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )  

Exemples

Inclinaison selon l'axe x uniquement

HTML

<div>Normal</div>
<div class="skewed">Inclin</div>

CSS

body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /* quivaut  skewX(10deg) */
  background-color: pink;
}

Rsultat

Inclinaison sur les deux axes

HTML

<div>Normal</div>
<div class="skewed">Inclin</div>

CSS

body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}

Rsultat

Spcifications

Compatibilit des navigateurs

Voir aussi

• La proprit transform
• Le type de donne <transform-function>
• La fonction skewX()
• La fonction skewY()
• Proprits de transformation individuelles :
  • translate
  • scale
  • rotate
  • Remarque : il n'existe pas de proprit skew