CSS -Transformation Translate | Erklärt

Während der Entwicklung einer Anwendung müssen die Entwickler das Website -Design sowohl attraktiv als auch interaktiv halten. Dazu können mehrere CSS -Eigenschaften verwendet werden, wie z. B. Übergang, Animation und viele mehr. Genauer gesagt das “verwandelnEigenschaft positioniert das Element auf der x-Achse, der y-Achse und der Z-Achse.

In diesem Artikel werden die CSS-Transformation Eigenschaft mit der Funktion von Value Translate () erläutert.

Beispielszenario

Für die Demonstration werden wir zwei Bilder erstellen, die übereinander gestapelt sind. Der erste ist statisch und leicht undurchsichtig, während der andere beweglich sein wird. Darüber hinaus die “verwandelnDie Eigenschaft wird auf das zweite Element angewendet, damit sie sich relativ zum undurchsichtigen Bild bewegt.

Schritt 1: Fügen Sie Bilder in HTML hinzu

Erstellen Sie in HTML zunächst ein DIV -Element mit dem Klassennamen “Hauptinhalt”. Fügen Sie innerhalb dieses DIV -Elements einen weiteren Div mit dem Klassennamen hinzu “Bewegung”. Fügen Sie in diesem DIV -Element zwei Elemente hinzu, die jeweils Attribute haben:

• “srcDas Attribut gibt den Bildpfad an.
• “KlasseDer Wert des Attributs wird hinzugefügt, um auf das relevante Element in CSS zuzugreifen.
• “Alt”Gibt den Text an, der angezeigt wird, wenn das Bild nicht hochgeladen wird.
• “BreiteEigenschaft definiert die Breite des hinzugefügten HTML -Elements.

Hier ist der HTML -Code:

Schritt 2: CSS anwenden

Lassen Sie uns vorwärts gehen, um CSS -Styling -Eigenschaften auf die HTML -Elemente anzuwenden.

Stil „Körper“ Element

Körper
Hintergrundfarbe: #B4CDE6;

Der "HintergrundfarbeDie Eigenschaft wird angewendet, um die Hintergrundfarbe des Körperselements festzulegen.

Stil „Move-Img“ div

.MOVE-IMG
Position: Relativ;
Breite: 300px;
Rand: Auto;
Rand: 40px;

Der "BewegungDas Divelelement wird mit den folgenden CSS -Eigenschaften angewendet:

• “Position”Eigenschaft mit dem Wert“relativ”Legt die Position des Elements relativ zu seiner normalen Position fest.
• “BreiteEigenschaft legt die Breite des Elements fest.
• “RandEigenschaft wird verwendet, um die Höhe des Elements festzulegen.
• “RandEigenschaft gibt Platz oben im Inhalt des Elements an.

Stil "IMG-1" Div

.IMG-1
Position: absolut;
Deckkraft: 0.12;

Der "IMG-1”Div wird wie folgt gestaltet:

• “Position”Eigenschaft mit dem Wert“absolut”Wird das Element relativ zu seinem nächstgelegenen übergeordneten Element positionieren.
• “OpazitätGibt die Transparenz des Elements an.

Stil „IMG-2“ Div

.IMG-2
Position: absolut;

Auf die gleiche Weise haben wir das positioniert “IMG-2”Div.

Ausgang

Wie man die Position des Objekts in HTML transformiert?

Der "verwandelnDie Eigenschaft ermöglicht es uns, ein Element zu drehen, zu schulen, zu skalieren oder zu übersetzen. Besonders das “übersetzen()Die Funktion passt die Position des Elements auf X, Y und Z-Achse an. Die Funktionalität der “übersetzenDie Eigenschaft ist die gleiche wie die mit der Transformationseigenschaft verwendete Funktion translate (), die verwendet wird.

Was sind die unterschiedlichen Eigenschaften der „Transformation“?

Es gibt mehrere Übersetzungswerte, die mit der CSS -Transformationseigenschaft verbunden sind:

• übersetzen()
• Translatex ()
• Translatey ()
• translatez ()
• Translate3D ()

Schauen Sie sich das bereitgestellte Beispiel für das Verständnis der Nutzung an!

Beispiel 1: Verwenden Sie "translate ()" mit "Transform" -Sache

Der "übersetzen()Die Funktion nimmt zwei Parameterwerte an. Der erste repräsentiert den Wert der x-Achse, und der zweite Wert repräsentiert die y-Achse:

Transformation: Translate (100px, 100px);

Es kann beobachtet werden, dass nach den angegebenen Werten das Element horizontal und vertikal neu positioniert wird:

Beispiel 2: Verwenden Sie "translatex ()" mit "Transform" -Sache

Um das Objekt horizontal zu bewegen, verwenden Sie das “Translatex ()”Funktion. Infolgedessen verschiebt der positive Wert das Objekt auf die rechte Seite, und der negative Wert verschiebt das Objekt auf die linke Seite:

Transformation: Translatex (100px);

Es kann beobachtet werden, dass das Objekt rechts 100px bewegt wurde:

Beispiel 3: Verwenden von "translatey ()" mit "Transform" -Spertion

Verwenden Sie die “, um das Objekt vertikal zu bewegen, das“Translatey ()”Funktion. Nach seinen Parametern verschiebt der positive Wert das Objekt nach unten, und der negative Wert wird nach oben bewegen:

Transformation: Translatey (90px);

Ausgang

Beispiel 4: Verwenden von "translatez ()" mit "Transform" -Spertion

Die translatex () und translatey () sind ziemlich einfach zu verstehen, da sie die Elemente in Bezug auf die X-Achse bzw. die Y-Achse verändern. Der "translatez ()Die Funktion ist irgendwie schwierig. Die x-Achse und die y-Achse bewegen das Element horizontal oder vertikal, während die Z-Achse das Objekt näher oder weit von Ihnen entfernt bewegt.

Übergeben von positivem Wert als TranslateZ () -Funktionsparameter

Sie können die Funktion von TranslateZ () wie folgt verwenden:

Transformation: Perspektive (200px) TranslateZ (50px);

Hier:

• “Perspektive()”: Diese Funktion definiert einen virtuellen Speicherplatz zwischen dem Bildschirm und dem HTML -Element.
• “translatez ()”: Dieser positive Wert in dieser Funktion bringt das Element näher an Sie, während der negative Wert das Element von Ihnen entfernen.

Es kann beobachtet werden, dass das Bild jetzt näher am Bildschirm kommt und größer aussieht:

Übergeben negativer Wert als TranslateZ () -Funktionsparameter

Lassen Sie uns nun den negativen Wert als Parameter von TranslateZ () angeben:

Transformation: Perspektive (200px) TranslateZ (-50px);

Der negative Wert bewegte das Element weit weg von uns:

Sich bewegendes Objekt in 3-D-Richtung bewegt

Verwenden Sie die “, um das Objekt in eine 3-D-Richtung zu bewegen, die“Translate3D ()”Funktion. Es nimmt den Wert als X-Achse, y-Achse und Z-Achse-Parameter ein. Darüber hinaus die “Perspektive()Der Wert gibt Platz zwischen dem Element und dem Bildschirm an, damit sich das Bild in einer 3-D-Ebene bewegen kann:

Transformation: Perspektive (500px) Translate3D (150px, 30px, 130px);

Die Ausgabe repräsentiert die Bewegung des Objekts in 3-D:

Das dreht sich alles um CSS -Transformationseigenschaften mit der Funktion translate () in CSS.

Abschluss

CSS “verwandeln”Eigenschaft mit dem Wert“übersetzen()”Positionierte die Elemente auf der X-Achse, der y-Achse und der Z-Achse. Diese Werte können positiv oder negativ sein. Der "Translatex ()" Und "Translatey ()Die Funktionen haben die Objekte horizontal und vertikal positioniert. Der "translatez ()Die Funktion bewegt das Objekt näher oder weg vom Bildschirm entfernt. Es wird mit dem "kombiniert"Perspektive()Funktion, die einen Speicherplatz zwischen dem Bildschirm und dem Element angibt. Dieser Artikel hat die CSS -Transformationseigenschaft mit der Funktion translate () gezeigt.