Transform-Origin mit Translate simulieren: Ein umfassender Leitfaden

Transform-Origin verstehen

Transform-Origin-Eigenschaft gibt die an Punkt, um den sich ein Element umwandelt. Durch Festlegen dieser Eigenschaft können wir die Drehung, Skalierung oder Neigung eines Elements präziser steuern.

Transform-Origin mit Translate simulieren

Die offizielle Dokumentation für CSS besagt, dass transform-origin mithilfe der Translate-Transformation simuliert werden kann. Der Prozess ist wie folgt:

• Übersetzen Sie das Element um den negierten Wert der Eigenschaft transform-origin.
• Wenden Sie die gewünschte Transformation an (z. B. skalieren, drehen).
• Übersetzen Sie das Element um den Wert der transform-origin-Eigenschaft zurück.

Fehlerbehebung bei falschen Ergebnissen

Wenn Sie versuchen, transform-origin mit zu simulieren Wenn die Übersetzung fehlschlägt, ist möglicherweise einer von zwei häufigen Fehlern aufgetreten:

Fehler 1: Falsche Übersetzungsreihenfolge

Die Transform-Origin-Simulation umfasst drei Übersetzungsvorgänge: den ersten negierten Übersetzung, die gewünschte Transformation und die endgültige positive Übersetzung. Es ist wichtig, diese Übersetzungen in der richtigen Reihenfolge auszuführen.

Beispiel:

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

In diesem Beispiel ist die ursprüngliche Übersetzung korrekt, aber die endgültige Übersetzung sollte „translate(100px, 100px)“ anstelle von „translate(-100px, -100px)“ lauten, um die ursprüngliche Übersetzung zu negieren und das Element in seinem Originalzustand wiederherzustellen Originalposition.

Fehler 2: Nicht übereinstimmender Transformationsursprung

Stellen Sie sicher, dass sowohl das Originalelement mit Transformationsursprung als auch das mit Übersetzen simulierte Element denselben Transformationsursprung haben . Der standardmäßige Transformationsursprung ist die Mitte des Elements und es ist wichtig, ihn in beiden Fällen entweder explizit festzulegen oder als Standard zu belassen.

Beispiel:

.translate {
  transform-origin: 0 0;
  transform: translate(-50px, -50px) rotate(45deg) scale(2) translate(50px, 50px);
}

Hier wurde der Transformationsursprung explizit auf die obere linke Ecke des Elements festgelegt, was dem Standardtransformationsursprung des Originalelements entspricht.

Fazit

Indem Sie diese Fehler korrigieren und die richtige Übersetzungsreihenfolge und den richtigen Transformationsursprung sicherstellen, können Sie den Transformationsursprung mithilfe der Übersetzungstransformation effektiv simulieren. Diese Technik eröffnet verschiedene kreative Möglichkeiten für die Elementmanipulation und Animation in CSS.