transform: Element transformieren (2D)
Anzeige Hier werben
transform (2D)
Werte: none, Transformationsfunktion
Standardwert: none
Vererbung: Ja
Kurzschreibweise: -
Anwendbar auf: alle Elemente
CSS-Level: CSS3
Die Eigenschaft transform bestimmt, wie das angesprochene Element transformiert werden soll.
Werte
Es kann none angegeben werden, um keine Transformation zu erlauben, oder eine der folgenden Transformationsfunktionen:
| Wert | Darstellung | Bedeutung | Skizze |
matrix (Matrix) | matrix(sechs mit Komma getrennte Zahlen) | Mithilfe dieser Funktion lassen sich auch alle anderen Trnsformationsfunktionen darstellen. Mehr Informationen zum Aufbau und Grundlagen. | |
|---|---|---|---|
translate (Übersetzung) |
translate(maximal zwei mit Komma getrennte Zahlen) |
Verschiebung. Die erste der beiden Zahlen gibt die X-Verschiebung um ihren Wert an, die zweite die Y-Verschiebung. Ist die zweite nicht gegeben ist sie 0. |
 |
translateX (X-Übersetzung) |
translateX(Zahl) |
Verschiebung in X-Richtung. | |
translate (Y-Übersetzung) |
translateY(Zahl) |
Verschiebung in Y-Richtung. | |
scale (Skalierung) |
scale(maximal zwei mit Komma getrennte Zahlen) |
Vergrößerung oder Verkleinerung. Die erste Zahl gibt die X-Skalierung, die zweite die Y-Skalierung an. Zahlen größer 1 ergeben eine Vergrößerung relativ zum Grundzustand, Zahlen kleiner 1 eine Verkleinerung. Ist die zweite Zahl nicht angegeben, ist sie gleich der ersten. |
 |
scaleX (X-Skalierung) |
scaleX(Zahl) |
Skalierung in X-Richtung (horizontale Skalierung). |
|
scaleY (Y-Skalierung) |
scaleY(Zahl) |
Skalierung in Y-Richtung (vertikale Skalierung). | |
rotate (Rotation) |
rotate(Winkel im Winkelmaß) |
Drehung um den Winkel. |  |
skew (Schräge) |
skew(maximal zwei Winkel im Winkelmaß) |
Schräge. Der erste Winkel gibt die X- bzw. horizontale Schräge an, der zweite die Y- bzw. vertikale Schräge. |  |
skewX (X-Schräge) |
skewX(Winkel im Winkelmaß) |
Schräge in X-Richtung (horizontale Schräge). | |
skewY (Y-Schräge |
skewY(Winkel im Winkelmaß) |
Schräge in Y-Richtung (vertikale Schräge). |
Beispiel
1 2 3 | DIV.transformation {
transform: skew(30deg,45deg);
}
|
Die Box besitzt eine 30° Schräge in der Horizontalen und eine 45° Schräge in der Vertikalen.
weiterführende Artikel
transform: Element transformieren (3D)
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "transform: Element transformieren (2D)" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "transform: Element transformieren (2D)" hier bearbeiten.
-
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
-
graphic, motion & web design - kernreaktor - staportal - mukitu