CSS/Funktionen/skewY()

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

Parameter	ein (positives oder negatives) Winkelmaß in deg für die vertikale Verzerrung. Positive Werte bewirken eine Verzerrung gegen den Uhrzeigersinn.
anwendbar auf	* HTML-Blockelemente, mit Ausnahme von nicht ersetzten Inline-Elementen SVG-Elemente
Browsersupport	caniuse: mdn-css_types_transform-function_skewX

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;
}

 

Weblinks

• CSSWG: The Transform Functions CSS Transforms Module Level 2
  • 2D Transform Functions CSS Transforms Module Level 1
• MDN: skewX()

Siehe auch

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