Wenn CSS-Elemente von ihrem ursprünglichen Speicherort transformiert werden, bewegt sich transform-origin nicht mit ihnen; alle nachfolgenden Transformationen und Rotationen stammen immer noch von der ursprünglichen transform-origin (Beispiel unten).
Es gibt einen Weg, den ich kenne ... und das heißt, alle neuen Transformationen rechts von den vorherigen hinzuzufügen. wie folgt: transform: translateY ( -5rem ) rotate( 45deg ) translateY( -10rem ) rotate( 15deg )... usw. Dies scheint immer die neuen Transformationen von der Mitte des aktuellen Elements wie gewünscht zu starten.
das Problem
Wenn Sie ein Element basierend auf Benutzereingaben mit dieser Technik transformieren, fügen Sie dem DOM unendlich viele Transformationen hinzu. Nimmt viel Speicher auf und verursacht andere unerwünschte Gleiteffekte (möglicherweise).
Hier ist eine Animation, die zeigt, wie sich die transform-origin nach jeder Transformation nicht in die Mitte des Elements bewegt:
die Frage
Ich muss einen Weg in CSS oder JS finden, um die Position von transform-origin zurückzusetzen oder zurück in die Mitte des transformierten Elements zu bewegen. Das Hinzufügen weiterer Transformationen nach rechts ist eine Technik, die für mich in einer interaktiven Echtzeitumgebung nicht funktioniert. Ein Versuch kann hier gesehen werden: Transformationen werden ... endlos hinzugefügt .
Wie kann ich entweder die Position eines transformierten Elements berechnen und die transform-origin zurück in ihre Mitte verschieben ODER wie kann ich mehrere Transformationswerte verwenden und sie zu einem Wert zusammenfassen, der das Element an der gleichen Stelle hält?
Tags und Links javascript html css animation css-transforms