Implementierung von 2D- und 3D-Transformationen in CSS3

CSS3 implementiert 2D-Ebenentransformation und visuelle 3D-Raumtransformation von Elementen. 2D-Transformationen können häufiger verwendet werden, und 3D-Effekte können das Tüpfelchen auf dem i sein.

Über die Äxte

Wir haben in der Mittelschule angefangen, uns mit Koordinatenachsen in der Geometrie zu beschäftigen. Das grundlegendste ist das ebene rechtwinklige Koordinatensystem XoY , das später um das räumliche rechtwinklige Koordinatensystem XYZ erweitert wurde. Lassen Sie uns nun über das Koordinatensystem in CSS sprechen.

Bei CSS und sogar bei der gerätebezogenen Entwicklung wird grundsätzlich das folgende Koordinatensystem befolgt: Am Beispiel des Mobiltelefonbildschirms befindet sich der Koordinatensystempunkt in der oberen linken Ecke des Bildschirms. Die x-Achse ist horizontal, wobei die Richtung nach rechts die positive Richtung ist. Die y-Achse ist vertikal, wobei die Richtung nach unten die positive Richtung ist. Die z-Achse verläuft senkrecht zur gesamten Bildschirmebene, wobei die Richtung nach außen die positive Richtung ist. Dies ist die Richtung, in die das Bildschirmlicht auf Ihre Augen gerichtet ist.

Wie in der Abbildung gezeigt:

2D-Transformationen

Einschließlich Übersetzung translate() , Rotation rotate() , Skalierung scale() , skew() , Matrix matrix() ;

übersetzen(x,y)

Zu den Übersetzungsoperationen zählen translateX(x) und translateY(y) . Der Wert des Übersetzungsparameters wird in die Klammern eingetragen und kann ein negativer Wert sein, also in die entgegengesetzte Richtung.

Zum Beispiel:

div {
    /*Das Element bewegt sich 50px nach rechts und 60px nach unten*/
    transformieren: übersetzenX(50px);
    transformieren: übersetzenY(60px);
}
/*Kurzform, gleiche Wirkung*/
div {
    transformieren: übersetzen(50px, 60px);
}

Beachten Sie, dass, wenn translate() nur einen Wert angibt, die Standardeinstellung die Verschiebung der X-Achse ist, also die horizontale Bewegung.

drehen (Grad)

Das Element dreht sich. Der Parameter in den Klammern ist der Drehwinkel. Im Uhrzeigersinn ist ein positiver Wert, gegen den Uhrzeigersinn ist ein negativer Wert. Die Einheit ist deg , also wie viel Grad.

Zum Beispiel:

div {
    /* 30° im Uhrzeigersinn drehen */
    transformieren: drehen (30 Grad);
} 

Maßstab(x,y)

Skalierungselemente, die Parameter sind die Skalierungsfaktoren für die x- und y-Achse, einschließlich scaleX(x) und scaleY(y) . Die Angabe eines Parameters bedeutet eine proportionale Skalierung;

Zum Beispiel:

div {
    /* Horizontal um die Hälfte verkleinern und vertikal um das Doppelte vergrößern*/
    transformieren: Skalierung(.5, 2);
} 

div {
    /* Um das Dreifache vergrößern*/
    transformieren: Skalierung(3);
} 

Schrägstellung(xGrad,yGrad)

Enthält skewX(deg) und skewY(deg) , die die Neigungswinkel in horizontaler und vertikaler Richtung darstellen;

Zum Beispiel:

div {
    Transformation: schrägX(30 Grad);
    transformieren: schrägY(45 Grad);
}
/* Abkürzung */
div {
    Transformation: Schrägstellung (30 Grad, 45 Grad);
}

Beachten Sie: Wenn das Element ein Rechteck ist, bedeutet skewX(30deg) dass die obere Kante des Rechtecks ​​fixiert und die untere Kante 30deg nach rechts geneigt ist; skewY(30deg) bedeutet, dass die linke Grenze des Rechtecks ​​fixiert und die rechte Grenze 30deg nach unten geneigt ist;

Sie können es sich anhand des oben erwähnten Bildschirmkoordinatensystems merken. Die x-Achse befindet sich oben auf dem Bildschirm und zeigt nach rechts; die y-Achse befindet sich links auf dem Bildschirm und zeigt nach unten.

Wenn skew() nur einen Wert angibt, ist die Standardeinstellung die horizontale Verzerrung .

Der Effekt von skewX(30deg):

Der Effekt von skewY(30deg):

Matrix(a,b,c,d,e)

Dies ist eine umfassende Eigenschaft. Die vorherige Übersetzung, Skalierung, Drehung und Neigung können alle durch diese Matrixfunktion erreicht werden. Ja, die Matrix T_T in der linearen Algebra im College;

Tatsächlich basiert diese Funktion auf dem Prinzip der vorherigen vier Operationen. Die Funktion hat sechs Parameter und die vier Operationen entsprechen verschiedenen Möglichkeiten zum Ändern der Parameter. Für diejenigen unter uns, die nicht Mathematik studieren, werden wir nicht näher auf das Prinzip eingehen. Die vorherigen Operationen sind im Grunde ausreichend (wenn Sie etwas Spannendes suchen, gehen Sie zu Baidu „CSS-Matrix“)~~;

3D-Transformation

Das sogenannte 3D besteht darin, der vorherigen 2D-Ebene eine Z-Achse hinzuzufügen. Der Methodenname ist ähnlich, und dann können die drei Achsen zur Transformation verwendet werden, um einen dreidimensionalen Effekt zu erzielen.

Schauen Sie sich alle 3D-Anleitungen an:

verschiebe3d(x,y,z)

Durch die Kombination des räumlichen Koordinatensystems und der oben genannten Positionen der x-, y- und z-Achsen entsprechen die drei Parameter den Translationswerten der Elemente in den drei Koordinatenachsenrichtungen und umfassen außerdem drei Methoden translateX(x) , translateY(y) und translateZ(z) ;

Beispiel:

div {
    transformieren: übersetzenX(50px);
    transformieren: übersetzenY(60px);
    transformieren: übersetzenZ(70px);
}
/* Abkürzung */
div {
    transformieren: übersetzen3d(50px, 60px, 70px);
}

Hinweis: Das Problem, dass der Effekt der Einstellung translateZ(z) nicht sichtbar ist, wird später erläutert, wenn wir über die Einstellung persoective sprechen.

3D-Drehung(x,y,z,Grad)

Die Parameter x, y, z sind Koordinatenpositionen im räumlichen Koordinatensystem, und dann wird eine neue Achse mit Richtung vom Ursprung (0, 0, 0) zu diesem Punkt gebildet, die in der Mathematik als Vektor bezeichnet wird. Der letzte Parameter ist der Rotationsgrad des Elements um die soeben gebildete neue Achse;

Es umfasst auch rotateX(deg) , rotateY(deg) , rotateZ(deg) . Das vorherige 2D rotate() ist hier rotateZ() .

Was die Drehrichtung betrifft, ähnelt die Beurteilungsmethode der Linkshandregel in der Physik: Wenn der Winkel als positiv angegeben ist, steht der Daumen der linken Hand senkrecht zu den vier Fingern, der Daumen zeigt auf die Koordinatenachse oder die benutzerdefinierte Achse, um die sich das Element dreht, und die Richtung, um die die vier Finger gebogen sind, ist die Drehrichtung.

Beispiel:

div {
    transformieren: rotierenX(30 Grad);
    transformieren: Y-Drehung (30 Grad);
    transformieren: rotataZ(30 Grad);
}
/* Benutzerdefinierte Achsenrotation */
div {
    transformieren: 3d drehen(10, 10, 10, 30 Grad);
}

Die Wirkung von rotateX(30deg):

Der Effekt von rotateY(30deg):

Warum die Rotation hier nicht wie erwartet erfolgt, sondern schrumpft, liegt hauptsächlich daran, dass der Blickwinkel nicht festgelegt ist, worauf später noch eingegangen wird.

Maßstab 3d(x,y,z)

Das Skalierungsverhältnis des Elements bezüglich dreier Achsen, einschließlich scaleX(x) , scaleY(y) , scaleZ(z) , zum Beispiel:

div {
    transformieren: scaleX(2);
    transformieren: scaleY(2);
    transformieren: scaleZ(2);
}
/* Abkürzung */
div {
    transformieren: scale3d(2, 2, 2);
}

Beachten Sie , dass hier scaleZ() verwendet wird. Normalerweise wird das Objekt durch die Erweiterung der Z-Achse dicker , aber die in CSS dargestellten Ebenenelemente haben keine Dicke , sodass durch die Skalierung der Z-Achse hier tatsächlich die Koordinaten des Elements auf der Z-Achse skaliert werden. Daher muss der Wert von translateZ() angegeben werden, um den gewünschten Effekt zu erzielen.

Beispiel:

Körper {
    Perspektive: 500;
}
div {
    /* Diese Reihenfolge muss eingehalten werden, erst zoomen, dann übersetzen, sonst gibt es keinen Effekt*/
    transformieren: scaleZ(2) übersetzenZ(100px);
} 

Nur wenn wir dem obigen Stil folgen, können wir den Effekt von scaleZ(2) sehen, da sich das Element 100px auf der Z-Achse bewegt und das Skalierungsverhältnis 2 beträgt, sodass es sich am Ende 200px bewegt. Auf dem Bildschirm erscheint das Element vergrößert. Dies ist der perspektivische Effekt, also der perspective Wert, der weiter unten erläutert wird.

matrix3d()

Es ähnelt der vorherigen 2D- matrix() , außer dass hier 16 Parameter in den Klammern stehen und die Matrix komplizierter ist. Überspringen wir es ﹋o﹋. Wenn Sie interessiert sind, können Sie auf Baidu~~ suchen;

Perspektive

Im obigen Beispiel haben die Verschiebung und Skalierung der Z-Achse normalerweise keinen sichtbaren Effekt. Das liegt am Fehlen dieses Attributwerts namens Perspektive . Dieser Begriff kommt in der Kunst oder im Design vor und soll den Effekt erzielen, dass Objekte größer sind, wenn sie näher sind, und kleiner, wenn sie weiter weg sind. Je weiter weg, desto kleiner sind sie und werden schließlich bis zu einem Punkt kleiner, dem Perspektivpunkt . perspective wird festgelegt, wie weit dieser Punkt vom Element entfernt ist. Im Allgemeinen spiegelt 300–600 einen guten Perspektiveffekt wider. Je kleiner der Wert, desto schwerwiegender ist die perspektivische Verformung des Elements .

Es ist zu beachten , dass diese Eigenschaft im Stil des übergeordneten Elements des Elements festgelegt werden muss, das den perspektivischen Effekt anwendet, um den Effekt anzuzeigen, zum Beispiel:

Körper {
    Perspektive: 500;
    /* Browserkompatibilität berücksichtigen*/
    -WebKit-Perspektive: 500;
}

Es kann auch für das Element selbst im folgenden Format festgelegt werden:

div {
    transformieren: Perspektive (500);
    -webkit-transform: Perspektive (500);
}

Ein realistischerer Effekt von rotateX(45deg):

Der Effekt von rotateY(45deg):

Perspektive-Ursprung

Dieses Element legt die Position des Perspektivenpunkts fest. Standardmäßig befindet er sich in der geometrischen Mitte des Elements. Wenn Sie ihn festlegen müssen, lautet das Format wie folgt:

Körper {
    /* Standard-Mitte */
    perspektivischer Ursprung: Mitte Mitte;
    /* Obere linke Ecke */
    Perspektivenursprung: links oben;
    /* Rechts Mitte */
    perspektivischer Ursprung: rechts Mitte;
    /* Unten Mitte */
    perspektivischer Ursprung: unten Mitte;
    /* Kann auch Länge sein*/
    Perspektive-Ursprung: 30px 40px;
    /*Denken Sie abschließend daran, die -WebKit--Kompatibilität hinzuzufügen*/
}

Der Effekt von perspective-origine: left center:

Der Effekt von perspektivischem Ursprung: rechts Mitte:

Rückseitensichtbarkeit

Übersetzt bedeutet es, ob die Rückseite sichtbar ist. visible und hidden kann man einstellen. Standardmäßig ist sichtbar. Befindet sich beispielsweise auf der Vorderseite des Elements Text und die Rückseite ist auf sichtbar eingestellt, wird der Text im Element nach einer Drehung um 180° um die y-Achse spiegelverkehrt dargestellt, sonst erscheint er nicht.

Der Effekt der Backface-Visibility: sichtbar:

Der Effekt der Rückseitensichtbarkeit: versteckt (Rotation findet statt, aber die Rückseite ist unsichtbar, also ist sie unsichtbar):

Andere Eigenschaften

Transform-Ursprung

Legen Sie den Benchmark für 2D/3D-Änderungen fest. Dies kann ein Längenwert oder left, right, top, bottom sein. Beispiel:

div {
    /* Um die obere linke Ecke des Elements drehen */
    Transform-Origin: links oben;
    transformieren: drehen (30 Grad);
} 

Transform-Stil

Legen Sie fest, wie das Element verschachtelte Elemente im 3D-Raum darstellt. Die Optionen sind flat und preserve-3d . Der Standardwert ist flat .

Hier können wir es so verstehen. Wenn wir vorher ein Element transformieren, transformieren wir es basierend auf dem Koordinatensystem der Ebene, auf der sich der Bildschirm befindet. Wenn das Element jedoch untergeordnete Elemente hat, wird transform-style verwendet, um zu bestimmen, auf welches Koordinatensystem transformiert werden soll. flat bedeutet, dass das Bildschirmkoordinatensystem weiterhin als Grundlage verwendet wird, und preserve-3d bedeutet, dass das Koordinatensystem der Ebene, auf der sich das transformierte übergeordnete Element befindet, als Grundlage verwendet wird.

#Elternteil {
    Transformationsstil: 3D bewahren;
    -WebKit-Transform-Style: 3D bewahren;
    transformieren: Perspektive (500) drehenY(45 Grad);
    -webkit-transform: Perspektive (500) Y-Drehung (45 Grad);
}
#Kind {
    transformieren: Perspektive (500) drehenX(45 Grad);
    -webkit-transform: Perspektive (500) rotiereX(45 Grad);
}

Auswirkungen von Flat:

Wirkung von Preserve-3D:

Wenn beispielsweise das übergeordnete Element um 45 Grad um die X-Achse gedreht wird und transform-style: preserve-3d festgelegt ist und das verschachtelte untergeordnete Element nur um 45 Grad um die Y-Achse gedreht wird, besteht der endgültige Effekt darin, dass das untergeordnete Element um 45 Grad um die Y-Achse der Ebene des übergeordneten Elements gedreht wird, was so aussieht, als würde zuerst die X-Achse und dann die Y-Achse um 45 Grad gedreht.

Vergessen Sie schließlich nicht, für alle oben genannten Funktionen browserkompatible Präfixe hinzuzufügen.

Übrigens, hier ist eine Demonstrationsseite, die die kombinierten Effekte der oben genannten Funktionen zeigt. Klicken Sie bitte unten: CSS 3D

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.