CSS- 2D-Transformationen
CSS-2D-Transformationen
Mit CSS-Transformationen können Sie Elemente verschieben, drehen, skalieren und neigen.
Bewegen Sie den Mauszeiger über das Element unten, um eine 2D-Transformation zu sehen:
In diesem Kapitel lernen Sie die folgende CSS-Eigenschaft kennen:
transform
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS 2D-Transformationsmethoden
Mit der CSS- transformEigenschaft können Sie die folgenden 2D-Transformationsmethoden verwenden:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Tipp: Im nächsten Kapitel lernen Sie 3D-Transformationen kennen.
Die translate()-Methode
Die translate()Methode verschiebt ein Element von seiner aktuellen Position (entsprechend den Parametern, die für die X-Achse und die Y-Achse angegeben wurden).
Das folgende Beispiel verschiebt das <div>-Element von seiner aktuellen Position um 50 Pixel nach rechts und 100 Pixel nach unten:
Beispiel
div
{
transform: translate(50px, 100px);
}
Die Methode „rotate()“.
Die rotate()Methode dreht ein Element um einen bestimmten Grad im oder gegen den Uhrzeigersinn.
Das folgende Beispiel dreht das <div>-Element um 20 Grad im Uhrzeigersinn:
Beispiel
div
{
transform: rotate(20deg);
}
Durch negative Werte wird das Element gegen den Uhrzeigersinn gedreht.
Das folgende Beispiel dreht das <div>-Element um 20 Grad gegen den Uhrzeigersinn:
Beispiel
div
{
transform: rotate(-20deg);
}
Die Methode scale()
Die scale()Methode vergrößert oder verkleinert ein Element (entsprechend den angegebenen Parametern für Breite und Höhe).
Das folgende Beispiel vergrößert das <div>-Element auf das Zweifache seiner ursprünglichen Breite und das Dreifache seiner ursprünglichen Höhe:
Beispiel
div
{
transform: scale(2, 3);
}
Das folgende Beispiel verkleinert das <div>-Element auf die Hälfte seiner ursprünglichen Breite und Höhe:
Beispiel
div
{
transform: scale(0.5, 0.5);
}
Die scaleX() Methode
Die scaleX()Methode vergrößert oder verkleinert die Breite eines Elements.
Das folgende Beispiel vergrößert das <div>-Element auf das Zweifache seiner ursprünglichen Breite:
Beispiel
div
{
transform: scaleX(2);
}
Das folgende Beispiel verkleinert das <div>-Element auf die Hälfte seiner ursprünglichen Breite:
Beispiel
div
{
transform: scaleX(0.5);
}
Die Methode scaleY()
Die scaleY()Methode erhöht oder verringert die Höhe eines Elements.
Das folgende Beispiel erhöht das <div>-Element auf das Dreifache seiner ursprünglichen Höhe:
Beispiel
div
{
transform: scaleY(3);
}
Das folgende Beispiel verringert das <div>-Element auf die Hälfte seiner ursprünglichen Höhe:
Beispiel
div
{
transform: scaleY(0.5);
}
Die Methode skewX()
Die skewX()Methode neigt ein Element entlang der X-Achse um den angegebenen Winkel.
Das folgende Beispiel neigt das <div>-Element um 20 Grad entlang der X-Achse:
Beispiel
div
{
transform: skewX(20deg);
}
Die skewY()-Methode
Die skewY()Methode neigt ein Element entlang der Y-Achse um den angegebenen Winkel.
Das folgende Beispiel neigt das <div>-Element um 20 Grad entlang der Y-Achse:
Beispiel
div
{
transform: skewY(20deg);
}
Die skew() Methode
Die skew()Methode neigt ein Element entlang der X- und Y-Achse um die angegebenen Winkel.
Das folgende Beispiel neigt das <div>-Element um 20 Grad entlang der X-Achse und um 10 Grad entlang der Y-Achse:
Beispiel
div
{
transform: skew(20deg, 10deg);
}
Wenn der zweite Parameter nicht angegeben ist, hat er einen Nullwert. Das folgende Beispiel neigt also das <div>-Element um 20 Grad entlang der X-Achse:
Beispiel
div
{
transform: skew(20deg);
}
Die matrix()-Methode
Das matrix()Verfahren kombiniert alle 2D-Transformationsverfahren in einem.
Die matrix()-Methode verwendet sechs Parameter, die mathematische Funktionen enthalten, mit denen Sie Elemente drehen, skalieren, verschieben (übersetzen) und neigen können.
Die Parameter sind wie folgt: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Beispiel
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
CSS-Transformationseigenschaften
Die folgende Tabelle listet alle 2D-Transformationseigenschaften auf:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
CSS-2D-Transformationsmethoden
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |