Eine kurze Analyse der Unterschiede und Funktionen zwischen Übergang, Transformation und Übersetzung in CSS3

transformieren und übersetzen

Transformieren bezieht sich auf Transformation und Deformation. Es ist ein CSS3-Attribut, genau wie andere Breiten- und Höhenattribute.

„translate“ ist der Attributwert von „transform“, was bedeutet, dass das Element in 2D transformiert wird. 2D-Transformation bedeutet, dass sich das Element von der aktuellen Position (0,0) aus in Richtung der x-Achse und in Richtung der y-Achse bewegt.

Zum Beispiel:

transform: translate(0,100%) bedeutet, das Element von seiner aktuellen Position um die gesamte Höhe des Elements entlang der Y-Achse nach unten zu verschieben.

transform: translate(-20px,0) bedeutet, sich von der aktuellen Position des Elements aus 20 Pixel nach links entlang der x-Achse zu bewegen.

„transform“ hat viele andere Eigenschaftswerte, „translate3D“ (3D-Transformation), „scale“ (2D-Skalierung) und andere Transformationsmethoden.

Übergang

Übergang ist der Animationsprozess, bei dem ein Satz von CSS-Eigenschaften innerhalb eines bestimmten Zeitraums in einen anderen Satz von Eigenschaften geändert wird. Kann verwendet werden, um dynamische Effekte zu erzielen, CSS3-Eigenschaften

Syntaxübergang: Die zu transformierende Eigenschaft Die für die Transformation benötigte Zeit Steuern Sie die Geschwindigkeit der Animation Ändern Sie die Verzögerungszeit, nach der die Animation ausgeführt wird

Die Übergangseigenschaft wird im Anfangsstil geschrieben, nicht im Endstil. Dieser Stil definiert das Erscheinungsbild des Elements vor dem Beginn der Animation. Sie müssen nur einmal einen Übergang für ein Element festlegen und der Browser kümmert sich um die Animation von einem Stil zum anderen.

Zum Beispiel:

Übergang: Breite 2 s;

Übergang: 2 s übersetzen;

Übergang: alles 2er.

Zusammenfassen

Damit ist dieser Artikel über die Unterschiede und Funktionen von Übergang, Transformation und Übersetzung in CSS3 abgeschlossen. Weitere relevante Inhalte zu Übergang, Transformation und Übersetzung in CSS3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!