2D-Transformationen in CSS ermöglichen es uns, einige grundlegende Transformationsoperationen im zweidimensionalen Raum durchzuführen, wie z. B. Verschieben, Drehen, Skalieren oder Verdrehen usw. Die transformierten Elemente ähneln absolut positionierten Elementen und wirken sich nicht auf umgebende Elemente aus, können aber kombiniert werden mit Überlappung umgebender Elemente Der Unterschied besteht darin, dass das konvertierte Element immer noch den Platz vor der Konvertierung auf der Seite einnimmt.
Lassen Sie uns die 2D-Konvertierung einführen:
1. Verschieben Sie Translate()
Entsprechend den Parametern, die durch die linke (X-Achse) und obere (Y-Achse) Position angegeben werden, kann das Verschieben von der aktuellen Elementposition die Position des Elements auf der Seite ändern, ähnlich wie bei der Positionierung.
1. Grammatik:
transform:translate(x,y);
Oder Sie können sie separat schreiben
transform:translateX(n);transform:translateY(n);
2. Kernpunkte:
(1) Definieren Sie die Bewegung in der 2D-Transformation und verschieben Sie Elemente entlang der X- und Y-Achse.
(2) Der größte Vorteil von Translate besteht darin, dass es die Position anderer Elemente nicht beeinflusst.
(3) Der Prozentsatz von Translate selbst ist relativ zu seinem eigenen Element Translate (50 %, 50 %);
(4) Es hat keine Auswirkung auf Inline-Tags;
Beispiel:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:translate(100px,10px);}</style></head><body ><div></div></body></html>Laufergebnisse:
2. Drehen rotieren()
Die Methode „rotate()“ dreht ein Element um einen bestimmten Grad im Uhrzeigersinn. Negative Werte sind zulässig, was dazu führt, dass das Element gegen den Uhrzeigersinn gedreht wird.
Syntax: transfrom:rotate (Grad der Drehung)
Kernpunkte:
Drehen (Grad), die Einheit ist Grad. Beispiel: Drehen (45 Grad);
Wenn der Winkel positiv ist, ist er im Uhrzeigersinn, wenn er negativ ist, ist er gegen den Uhrzeigersinn;
Standardmäßig ist der Mittelpunkt im Uhrzeigersinn der Mittelpunkt des Elements;
Beispiel:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px20px;transform:rotate(45deg);}</style></head> <body><div></div></body></html>Laufergebnisse:
3. 2D-Transformations-Mittelpunkt-Transformationsursprung:
Grammatik:
transform-origin:xy;
Kernpunkte:
(1) Beachten Sie, dass x und y durch Leerzeichen getrennt sind;
(2) Der Standardmittelpunkt von xy ist der Mittelpunkt des Elements (50 % 50 %);
(3) Sie können auch Pixel oder Richtungsnomen für xy (rechts links Mitte unten oben) festlegen;
4. Zoomskala()
Mit der Methode „scale()“ vergrößert oder verkleinert sich die Größe des Elements, abhängig von den Parametern „Breite“ (X-Achse) und „Höhe“ (Y-Achse):
(1) Ändern Sie die Größe des Elements, vergrößern oder verkleinern Sie das Element
(2) Wenn es eine negative Zahl ist, wird sie umgekehrt.
(3) Das Syntaxformat der Funktion ist wie folgt:
Maßstab(sx,sy)
Dabei repräsentiert sx das Skalierungsverhältnis in horizontaler Richtung und sy das Skalierungsverhältnis in vertikaler Richtung. Darüber hinaus kann der Parameter sy weggelassen werden und sein Standardwert ist gleich sx.
Beispiel:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:scale(0.7);}</style></head><body>< div></div></body></html>Laufergebnisse:
5. Skew()
Enthält zwei Parameterwerte, die den Neigungswinkel der X-Achse bzw. der Y-Achse angeben. Wenn der zweite Parameter leer ist, ist er standardmäßig 0. Ein negativer Parameter bedeutet eine Neigung in die entgegengesetzte Richtung.
(1) skewX(<angle>); bedeutet Neigung nur in der X-Achse (horizontale Richtung).
(2) skewY(<angle>); bedeutet Neigung nur in der Y-Achse (vertikale Richtung).
(3) Elemente in verschiedene Richtungen neigen lassen.
(4) skew(a) ist gleich skew(a,0)
(5)Schiefe(x,y)
(6) Einheitswinkel Grad
Beispiel:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;transform:skew(-15deg,20deg);}</style>< /head><body><div></div></body></html>Laufergebnisse:
6. Matrix()
Die Funktion „matrix()“ kann als Abkürzung für mehrere Funktionen angesehen werden: „skew()“, „scale()“, „rotate()“ und „translate()“. Alle 2D-Konvertierungsoperationen können gleichzeitig über die Funktion „matrix()“ definiert werden Das Syntaxformat der Funktion lautet wie folgt:
Matrix(a,b,c,d,tx,ty)
Die sechs Parameter in der Funktion „matrix()“ entsprechen „scaleX()“, „skewX()“, „scaleY()“, „translateX()“ und „translateY()“. Mit „matrix()“ können Sie verschiedene 2D-Konvertierungen implementieren , wie zum Beispiel:
Translate(tx,ty)=matrix(1,0,0,1,tx,ty);：
wobei tx und ty die horizontalen und vertikalen Übersetzungswerte sind;
rotieren(a)=matrix(cos(a),sin(a),-sin(a),cos(a),0,0);
wobei a der Wert des Grades ist. Sie können die Drehung umkehren, indem Sie die Werte sin(a) und -sin(a) vertauschen;
Skala(sx,sy)=matrix(sx,0,0,sy,0,0);
wobei sx und sy die horizontalen und vertikalen Skalierungswerte 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.
Beispiel:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;float:left;}.one{transform:matrix(0.866,0.5, -0.5,0.866,0,0);}.two{margin-left:35px;transform:matrix(0.586,0.8,-0.8,0.686,0,0);}.two{margin-left:40px;margin- top:25px;transform:matrix(0.586,0.8,-0.8,0.866,0,0);}.four{transform:matrix(0.586,0.8,-0.8,0.586,40,30);}</style>< /head><body><divclass=one></div><divclass=two></div><divclass=drei></div><divclass=four></div></body></html>Laufergebnisse:
Die Matrix()-Methode und die 2D-Transformationsmethode werden zu einer zusammengefasst.
Die Matrixmethode verfügt über sechs Parameter, darunter Rotations-, Skalierungs-, Bewegungs- (Translations-) und Neigungsfunktionen.
Verwenden Sie eine Matrix, um die Transformationsbetragsmatrix (a, b, c, d, x, y) auszudrücken.
●acx
●bdy
●0 0 1
Üben wir es anhand eines konkreten Falles:
Der Code lautet wie folgt:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Dokument</title><style>body{margin:100px;}.transformElement{width:200px;height:200px;background-color:red;transition:all1slinear;float:left;position:relative;left:0; color:#FFF;/*transform-origin:lefttop;*/}.transformElement2{width:200px;height:200px;background-color:blue;transition:all1slinear;float:left;}.transformElement:hover{/*transform :translate(200px,0)rotate(360deg)scale(2);*//*left:100px;*//*transform:scale(2,0.5)*/transform:skew(-45deg,45deg);}. clock{width:400px;height:400px;border-radius:50%;background-color:#Faa;position:relative;}.stick{width:4px;height:200px;background-color:blue;position:absolute; left:198px;top:0;transition:all12slinear;transform-origin:centerbottom;}.stickshort{width:8px;height:100px;background-color:rgb(142,21,248);position:absolute;left:196px;top :100px;transition:all12slinear;transform-origin:centerbottom;z-index:2;}.clock:hover.stick{transform:rotate(4320deg);}.clock:hover.stickshort{transform:rotate(360deg);} </style></head><body><!--<div></div><div></div>--><div><div></div><div></div>< /div></body></html>Laufergebnisse:
