Wie kann ich CSS „transform-origin' nur mit „transform: Translate' simulieren?

Transform-Origin mithilfe von Translate in CSS simulieren

In CSS definiert die Eigenschaft „transform-origin“ den Ursprungspunkt für die Anwendung von Transformationen auf ein Element . Es ist wichtig zu beachten, dass diese Eigenschaft angewendet wird, indem zuerst das Element um den negierten Wert seiner eigenen Transformationsursprungseigenschaft übersetzt wird, dann die Transformation des Elements angewendet wird und dann um den Eigenschaftswert übersetzt wird.

Um das zu simulieren Verhalten von transform-origin unter Verwendung von transform: Translate sind die folgenden Schritte erforderlich:

1. Negieren Sie die transform-origin-Werte:Die Werte für transform-origin muss negiert werden, bevor sie als Übersetzungen angewendet werden können. Dies liegt daran, dass die Übersetzungstransformation einen negativen Wert auf den Ursprungspunkt anwendet, wodurch der Ursprung effektiv invertiert wird.
2. Wenden Sie die Transformation des Elements an:Nach dem Negieren der Transformationsursprungswerte kann die Transformation des Elements ausgeführt werden wie gewohnt angewendet werden.
3. Übersetzen Sie den Ursprung:Übersetzen Sie abschließend den Ursprung mithilfe der positiven Negation zurück in seine ursprüngliche Position Transformationsursprungswerte. Dieser Schritt stellt sicher, dass der Ursprungspunkt an seine vorgesehene Position zurückgesetzt wird.

Falsches Beispiel:

Im bereitgestellten Beispiel liegt das Problem in falschen Übersetzungen. Die negierten Werte für transform-origin werden korrekt angewendet, aber die endgültige Übersetzung fehlt. Der folgende korrigierte Code liefert genaue Ergebnisse:

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

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

Richtiges Beispiel:

Dieses korrigierte Beispiel enthält den letzten Übersetzungsschritt, der zur Wiederherstellung des Ursprungspunkts erforderlich ist an die vorgesehene Position. Folglich weisen die Boxen das gleiche transformierte Erscheinungsbild auf, was zeigt, dass transform-origin tatsächlich mit transform:translate simuliert werden kann.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS „transform-origin' nur mit „transform: Translate' simulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!