Kann Transform-Origin durch Übersetzen ersetzt werden?

Transform-Origin mithilfe von Translate simulieren: Das Geheimnis lüften

Die Transformation-Origin-Eigenschaft von CSS bietet eine beispiellose Kontrolle über den Ursprungspunkt für Transformationen. Sie können die Funktionalität jedoch mit pure transform:translate auf geniale Weise nachbilden, wenn Sie die folgenden Schritte befolgen:

1. Übersetzungen umkehren:

Im Gegensatz zu Ihrem ursprünglichen Versuch müssen Sie die Übersetzungswerte umkehren, um das richtige Ergebnis zu erzielen. Dies liegt daran, dass Translate positive Werte als Bewegung nach rechts oder unten interpretiert, während Transform-Origin von der oberen linken Ecke aus misst.

2. Transformationsursprünge ausrichten:

Der Standardtransformationsursprung ist auf die Mitte des Elements festgelegt. Damit Ihre Simulation ordnungsgemäß funktioniert, richten Sie den Transformationsursprung des Elements, das Sie transformieren, mithilfe der Übersetzungstechnik an der oberen linken Ecke aus (0, 0).

Beispiel:

Bedenken Sie diesen überarbeiteten Code:

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

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

Durch Befolgen dieser Prinzipien können Sie das Verhalten von transform-origin mithilfe von Translate effektiv simulieren, was Ihnen ermöglicht um nuancierte Transformationen mühelos freizuschalten.

Das obige ist der detaillierte Inhalt vonKann Transform-Origin durch Übersetzen ersetzt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!