CSS/Funktionen/skewX()

Browserunterstützung
caniuse.com

Die CSS-Funktion skewX() definiert eine Transformation, die ein Element in horizontaler Richtung auf der 2D-Ebene schräg stellt. Ihr Ergebnis ist ein Datentyp <Transformationsfunktion>

anwendbar auf

• HTML-Blockelemente, mit Ausnahme von nicht ersetzten Inline-Elementen
• SVG-Elemente

Parameter

* ein (positives oder negatives) Winkelmaß in deg für die horizontale Verzerrung. Positive Werte bewirken eine Verzerrung gegen den Uhrzeigersinn.

Beispiel

  ul a {
    ...
    transform: skewX(-30deg);
  }

Die Links werden angeschrägt dargestellt: angeschrägtes Menü aus Parallelogrammen

Siehe auch

• Transform
  • Transform#transform-Eigenschaft
    • angeschrägtes Menü aus Parallelogrammen
  • SVG-Transformationen
    • Scherung mit skew

Weblinks

• CSSWG: The Transform Functions CSS Transforms Module Level 2
  • 2D Transform Functions CSS Transforms Module Level 1
• MDN: skewX()
• Browser-Support: caniuse.com