CSS/Funktionen/skewY()

Browserunterstützung
caniuse.com

Die CSS-Funktion skewY() definiert eine Transformation, die ein Element in vertikaler 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 vertikale Verzerrung. Positive Werte bewirken eine Verzerrung gegen den Uhrzeigersinn.

Beispiel

@keyframes skewing {
  0%  { transform: skewY(0deg);}
  20% { transform: skewY(10deg);}
  40% { transform: skewY(45deg);}
  60% { transform: skewY(90deg);}
  80% { transform: skewY(120deg);}
  100%{ transform: skewY(0deg);}
}
.box { 
    animation: skewing 10s steps(1) 0s infinite;
}

 

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