CSS3 2D-Transformation

CSS3 2D-Transformationen erlauben es, in2Transformierte Elemente im D-Raum.

des Elements2D-Transformation

Verwendung von CSS3 2D-Transformationsfunktion, mit der grundlegende Transformationen von Elementen in einem zweidimensionalen Raum ausgeführt werden können, z.B. Verschieben, Drehen, Skalieren und Neigen.

Transformierte Elemente beeinflussen nicht die umliegenden Elemente, können jedoch wie Elemente mit absoluter Position übereinandergelegt werden. Transformierte Elemente nehmen jedoch immer noch im Layout Platz ein, wenn sie in ihrer Standardposition (nicht transformiert) sind.

Verwendung von CSS-Transformationen und -funktionen

CSS3 Das transform-Attribut verwendet Transformationsfunktionen, um die Koordinatensysteme zu manipulieren, die von den Elementen verwendet werden, um Transformationseffekte anzuwenden.

Nachfolgend wird beschrieben, welche Transformationen diese Funktionen durchführen:

Funktion translate()

Bewegt das Element entlang der Achsen X und Y von seiner aktuellen Position zur neuen Position. Es kann als translate(tx, ty) geschrieben werden. Wenn ty nicht angegeben ist, wird angenommen, dass der Wert null ist.

img　{
　　　　-webkit-transform:　translate(200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px);　　　　　　
}

translate(200px, 50px) Diese Funktion bewegt das Bild entlang der horizontalen x-Achse200 pixels und bewegt sich entlang der y-Achse vertikal50 Pixel.}}

rotate() Funktion

Die Funktion rotate() dreht das Element um seinen Ursprung (von transform-mit der Eigenschaft origin angegeben) um den angegebenen Winkel drehen. Sie kann in Form von rotate(a) written werden.

img　{
　　　　-webkit-transform: rotate(30deg);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform: rotate(30deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform: rotate(30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform: rotate(30deg);　　　　　　
}

rotate(30deg) Diese Funktion dreht das Bild um seinen Ursprung in Richtung des Uhrzeigersinns30 Grad. Sie können auch negative Werte verwenden, um das Element im Uhrzeigersinn zu drehen.

Die Funktion scale()

Die Funktion scale() vergrößert oder verkleinert das Element. Sie kann in Form von scale(sx, sy) written werden. Wenn sy nicht angegeben ist, wird ein Wert von sx angenommen.

img　{
　　　　-webkit-transform: scale(1.5);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform: scale(1.5);　　/*　Firefox　*/
　　　　　　　　-ms-transform: scale(1.5);　　/*　IE　9　*/
　　　　　　　　　　　　transform: scale(1.5);　　/*　Modern Browser　*/　　　　
}

scale(1.5) skaliert das Bild proportional auf die ursprüngliche Größe des Bildes.1.5mal. Die Funktion scale(1) oder scale(1,1) hat auf das Element keinen Einfluss.

Die Funktion skew()

Die Funktion skew() macht das Element entlang der X- und Y-Achse um den angegebenen Winkel geneigt. Sie kann in Form von skew(ax, ay) written werden. Wenn ay nicht angegeben ist, wird ein Wert von Null angenommen.

img　{
　　　　-webkit-transform: skew(-40deg,　15deg);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform: skew(-40deg,　15deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform: skew(-40deg,　15deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform: skew(-40deg,　15deg);　　/*　Modern Browser　*/　　　　
}

Die Funktion skew(-40deg, 15deg) macht das Element entlang der X-Achse horizontal geneigt-40 Grad und macht die Y-Achse vertikal geneigt15Grad.

matrix() Funktion

matrix() Funktion kann alle2D-Transformation, z.B. Verschiebung, Rotation, Skalierung und Neigung, auszuführen. Sie nimmtMatrixForm von sechs Parametern, die als matrix(a, b, c, d, e, f) written werden können. Im nächsten Abschnitt wird gezeigt, wie man sie verwendet, um jede2D-Transformationsfunktion matrix().

• translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty); - wobei tx und ty die horizontalen und vertikalen Verschiebungswerte sind.

• rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); - wobei a der Grad ist. Sie können sin(a) und-Der Wert von sin(a) umkehrt die Rotation. Die maximale Rotation, die Sie ausführen können, beträgt360 Grad.

• scale(sx, sy) = matrix(sx, 0, 0, sy, 0, 0); - wobei sx und sy die horizontalen und vertikalen Skalierungsfaktoren sind.

• skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0, 0); - wobei ax und ay die horizontalen und vertikalen Werte in Grad sind.

Dies wird durch die Funktion matrix() ausgeführt2Beispiel für die D-Transformation.

img　{
　　　　-webkit-transform: matrix(0,　-1,　1,　0,　200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform: matrix(0,　-1,　1,　0,　200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform: matrix(0,　-1,　1,　0,　200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform: matrix(0,　-1,　1,　0,　200px,　50px);　　
}

Bei mehreren Transformationen, die gleichzeitig ausgeführt werden, ist es bequemer, eine einzelne Transformationsfunktion zu verwenden und sie in der Reihenfolge aufzulisten, wie folgt:

img　{
　　　　-webkit-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　　　　　
}

2D-Transformationen

Der folgende Tabelle gibt eine kurze Übersicht über alle2D-Transformationsfunktion.