CSS3 2D-Transformation

CSS3-Transformationen

CSS3-Transformationen können Elemente verschieben, skalieren, drehen, verlängern oder strecken.

Wie funktioniert das?

Die Wirkung einer Transformation besteht darin, die Form, Größe und Position eines Elements zu ändern.

Sie können 2D- oder 3D-Transformationen verwenden, um Ihre Elemente zu transformieren.

Bewegen Sie die Maus über die folgenden Elemente, um die 2D- und 3D-Transformationseffekte zu sehen:

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft unterstützt.

Zahlen gefolgt von -webkit-, -ms- oder -moz- geben die erste Browserversion an, die die präfixierte Eigenschaft unterstützte.

Internet Explorer 10 und Opera unterstützen die transform-Eigenschaft.

Chrome und Safari benötigen die mit -webkit- präfixierte Version.

Hinweis:Internet Explorer 9 erfordert die mit -ms- präfixierte Version.

2D-Transformation

In diesem Kapitel lernst du 2D-Transformationsmethoden kennen:

• translate()
• rotate()
• scale()
• skew()
• matrix()

Im nächsten Kapitel lernst du 3D-Transformationen kennen.

Beispiel

div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari und Chrome */ }

Selbst ausprobieren »

translate()-Methode

Die translate()-Methode verschiebt ein Element von seiner aktuellen Position entsprechend den Parametern, die für die linke (X-Achse) und obere (Y-Achse) Position angegeben sind.

Beispiel

div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari und Chrome */ }

Selbst ausprobieren »

Der translate-Wert (50px, 100px) verschiebt das Element 50 Pixel von links und 100 Pixel von oben.

rotate()-Methode

Die rotate()-Methode dreht ein Element um einen angegebenen Winkel im Uhrzeigersinn. Negative Werte sind erlaubt, wodurch das Element gegen den Uhrzeigersinn gedreht wird.

Beispiel

div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari und Chrome */ }

Selbst ausprobieren »

Der rotate-Wert (30deg) dreht das Element um 30 Grad im Uhrzeigersinn.

scale()-Methode

Die scale()-Methode vergrößert oder verkleinert die Größe eines Elements, abhängig von den Parametern für Breite (X-Achse) und Höhe (Y-Achse):

Beispiel

-ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /*Standardsyntax*/

Selbst ausprobieren »

scale(2,3) transformiert die Breite auf das 2-Fache ihrer ursprünglichen Größe und die Höhe auf das 3-Fache ihrer ursprünglichen Größe.

skew()-Methode

Syntax

transform:skew(<angle> [,<angle>]);

Enthält zwei Parameterwerte, die die Scherwinkel entlang der X-Achse und der Y-Achse repräsentieren. Wenn der zweite Parameter leer ist, ist sein Standardwert 0. Negative Parameter geben eine Scherung in die entgegengesetzte Richtung an.

• skewX(<angle>); stellt eine Scherung nur entlang der X-Achse (horizontale Richtung) dar.
• skewY(<angle>); stellt eine Scherung nur entlang der Y-Achse (vertikale Richtung) dar.

Beispiel

div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari und Chrome */ }

Selbst ausprobieren »

skew(30deg,20deg)Element inXAchse undYVerzerrt 20 Grad und 30 Grad entlang der Achsen.

matrix()-Methode

Die matrix()-Methode kombiniert alle 2D-Transformationsmethoden in einer.

Die matrix-Methode hat sechs Parameter, darunter Funktionen für Rotation, Skalierung, Bewegung (Translation) und Verzerrung.

Beispiel

Verwenden Sie die matrix()-Methode, um das div-Element um 30° zu drehen.

div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari und Chrome */ }

Selbst ausprobieren »

Neue Transformationseigenschaften

Im Folgenden sind alle Transformationseigenschaften aufgelistet:

2D-Konvertierungsmethoden