Funktion skew
Die Funktion skew verzerrt ein Element
und verwandelt es dadurch von einem Rechteck
in ein Parallelogramm. Wird in Verbindung mit
der Eigenschaft transform verwendet.
Als Wert der Eigenschaft dient ein Winkel in beliebigen Winkeleinheiten.
Die Verzerrung erfolgt um den Punkt,
der durch die Eigenschaft transform-origin festgelegt wird.
Kann einen oder zwei Parameter akzeptieren, die durch Kommas getrennt werden. Wenn es zwei Parameter gibt - legt der erste Parameter die horizontale Verzerrung fest und der zweite - die vertikale. Wenn nur ein Parameter vorhanden ist - dann legt dieser die horizontale Verzerrung fest (und nicht in beide Richtungen). Parameter können sowohl positiv als auch negativ sein.
Syntax
Selektor {
transform: skew(ein oder zwei Winkel);
}
Beispiel
In diesem Beispiel wird das Blockelement um 30
Grad nach links verzerrt:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Beispiel
In diesem Beispiel wird das Blockelement um 30
Grad nach rechts verzerrt:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Beispiel
In diesem Beispiel wird das Blockelement um 30
Grad vertikal verzerrt (positiver Wert):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Beispiel
In diesem Beispiel wird das Blockelement um 30
Grad vertikal verzerrt (negativer Wert):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Beispiel
Verzerrung sowohl entlang der X- als auch der Y-Achse festlegen:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
