Funktion skewX
Die Funktion skewX bewirkt eine Schrägstellung des Elements
entlang der X-Achse und verwandelt es dabei in ein Parallelogramm.
Sie wird in Verbindung mit der Eigenschaft transform verwendet.
Als Wert dient ein Winkel in beliebigen Winkeleinheiten.
Der Winkel kann sowohl positiv als auch
negativ sein. Ein positiver Wert
bewirkt eine Schrägstellung nach links,
ein negativer - nach rechts.
Die Schrägstellung erfolgt um den Punkt,
der durch die Eigenschaft transform-origin
angegeben wird.
Syntax
Selektor {
transform: skewX(Winkel);
}
Beispiel
In diesem Beispiel wird der Block um 30
Grad nach links geschrägt:
<div id="elem">lorem ipsum</div>
#elem {
transform: skewX(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Beispiel
In diesem Beispiel wird der Block um 30
Grad nach rechts geschrägt:
<div id="elem">lorem ipsum</div>
#elem {
transform: skewX(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
