4 Funktionen, die durch das Transform-Attribut in CSS3 implementiert werden

In CSS3 können mit der Transformationsfunktion vier Arten der Deformationsverarbeitung von Text oder Bildern implementiert werden: Drehung, Skalierung, Neigung und Bewegung.

1. Browserunterstützung

Bisher unterstützen die Browser Safari 3.1 und höher, Chrome 8 und höher, Firefox 4 und höher, Opera 10 und höher diese Eigenschaft.

2. Drehung

Verwenden Sie die Drehmethode, fügen Sie im Parameter den Winkelwert hinzu, gefolgt vom Wort „Grad“, das die Winkeleinheit angibt, und die Drehrichtung ist im Uhrzeigersinn.

transformieren: drehen (45 Grad);

3. Zoom

Mit der Skalierungsmethode können Sie Text oder Bilder skalieren und im Parameter den Skalierungsfaktor angeben.

transform:scale(0.5); //Um die Hälfte verkleinern

(1) Sie können die horizontale und vertikale Vergrößerung eines Elements separat festlegen.

transform:scale(0.5, 2); //Horizontal halbieren, vertikal verdoppeln.

4. Neigung

Verwenden Sie die Skew-Methode, um die Skew-Verarbeitung von Text oder Bildern zu implementieren, und geben Sie in den Parametern den Skew-Winkel in horizontaler Richtung und den Skew-Winkel in vertikaler Richtung an.

transform:skew(30deg, 30deg); //30 Grad horizontal und 30 Grad vertikal neigen.

(1) Verwenden Sie nur einen Parameter und lassen Sie den anderen Parameter weg

Dabei wird berücksichtigt, dass die Neigung nur in horizontaler Richtung erfolgt, nicht aber in vertikaler Richtung.

transformieren: schief (30 Grad);

5. Handy, Mobiltelefon

Verwenden Sie die Übersetzungsmethode, um Text oder Bilder zu verschieben, und geben Sie in den Parametern die horizontale und vertikale Bewegungsdistanz an.

transform: translate(50px, 50px); //50px horizontal und 50px vertikal verschieben

(1) Verwenden Sie nur einen Parameter und lassen Sie den anderen Parameter weg

In diesem Fall wird nur eine Bewegung in horizontaler Richtung und nicht in vertikaler Richtung berücksichtigt.

transformieren: übersetzen(50px);

6. Verwenden Sie mehrere Deformationsmethoden für ein Element

Transformieren: Verschieben (150 Pixel, 200 Pixel), Drehen (45 Grad), Skalieren (1,5);

7. Geben Sie den Basispunkt der Verformung an

Wenn Sie die Transformationsmethode zum Verformen von Text oder Bildern verwenden, wird die Verformung basierend auf dem Mittelpunkt des Elements durchgeführt.

Transform-Origin-Eigenschaft

Mit dieser Eigenschaft können Sie den Basispunkt der Verformung ändern.

transformieren: drehen (45 Grad);
transform-origin:leftbottom; //Ändern Sie den Referenzpunkt in die untere linke Ecke des Elements

(1) Geben Sie die horizontale Position des Attributwertreferenzpunkts im Element an: links, Mitte, rechts
Die vertikale Position des Referenzpunkts im Element: oben, mittig, unten

8. 3D-Deformationsfunktion

(1) Drehung

Verwenden Sie die Methoden rotateX, rotateY und rotateZ, um das Element um die X-, Y- und Z-Achse zu drehen. Fügen Sie im Parameter den Winkelwert hinzu, gefolgt vom Wort deg, das die Winkeleinheit darstellt. Die Drehrichtung ist im Uhrzeigersinn.

transformieren: rotierenX(45 Grad);
transformieren: Y-Drehung (45 Grad);
transformieren: drehenZ(45 Grad);
transformieren: X drehen (45 Grad) Y drehen (45 Grad) Z drehen (45 Grad);
Transformieren: Skalieren (0,5) Y-Drehen (45 Grad) Z-Drehen (45 Grad);

(2) Skalierung

Verwenden Sie die Methoden „scaleX“, „scaleY“ und „scaleZ“, um das Element jeweils entlang der X-Achse, Y-Achse und Z-Achse zu skalieren und geben Sie das Skalierungsverhältnis in den Parametern an.

transformieren: MaßstabX(0,5);
transformieren:scaleY(1);
transformieren:scaleZ(2);
transformieren: MaßstabX(0,5)MaßstabY(1);
transformieren: Skalieren (0,5) Y-Drehung (45 Grad);

(3) Neigung

Verwenden Sie die Methoden skewX und skewY, um das Element im Uhrzeigersinn auf der X- bzw. Y-Achse zu neigen (keine Methode skewZ), und geben Sie den Neigungswinkel im Parameter an

Transformation: skewX(45 Grad);
transformieren: schrägY(45 Grad);

(4) Mobilgeräte

Verwenden Sie die Methoden „translateX“, „translateY“ und „translateZ“, um das Element jeweils in Richtung der X-Achse, Y-Achse und Z-Achse zu verschieben und fügen Sie dem Parameter die Bewegungsdistanz hinzu.

transformieren: übersetzenX(50px);
transformieren: übersetzenY(50px);
transformieren: übersetzenZ(50px);

9. Verformungsmatrix

Hinter jeder Deformationsmethode steht eine entsprechende Matrix.

(1) 2D-Verformung berechnen (3x3-Matrix)

\begin{bmatrix}a&c&e\\b&d&f\\0&0&1\end{bmatrix}

Diese 2D-Deformationsmatrix kann als matrim(a,b,c,d,e,f) geschrieben werden, wobei a~f jeweils eine Zahl darstellt, die bestimmt, wie der Deformationsprozess durchgeführt wird.

(2) 2D-Translationsmatrix

\begin{bmatrix}1&0&tx\\0&1&ty\\0&0&1\end{bmatrix}
//Gleicher Effekt: 150 Pixel nach rechts verschieben, 150 Pixel nach unten verschieben
transformieren: Matrix(1, 0, 0, 1, 150, 150);
transformieren: übersetzen(150px, 150px);

(3) Berechnung der 3D-Verformung

4x4-Matrix für 3D-Skalierung und Deformation

\begin{bmatrix}sx&0&0&0\\0&sy&0&0\\0&0&sz&0\\0&0&0&1\end{bmatrix}
transformieren:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
// Der Effekt ist derselbe: Reduzierung um ein Fünftel entlang der X-Achse und Reduzierung um die Hälfte entlang der Y-Achse.
transformieren:scale3d(0.8,0.5,1);
transform:matrix3d(0,8,0,0,0,0,0,5,0,0,0,0,1,0,0,0,0,1);

(4) Mehrere Verformungsprozesse können über die Matrix durchgeführt werden

Dies kann erreicht werden, indem die erforderliche Deformationsmatrix multipliziert wird, um eine neue Deformationsmatrix zu erhalten.

Dies ist das Ende dieses Artikels über die vier Funktionen, die durch das Transform-Attribut in CSS3 implementiert werden. Weitere relevante Inhalte zur Implementierung des Transform-Attributs in CSS3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!