Transformationsursprung - CSS-Tricks

Die transform-originEigenschaft wird in Verbindung mit CSS-Transformationen verwendet, sodass Sie den Ursprungspunkt einer Transformation ändern können.

.box ( transform: rotate(360deg); transform-origin: top left; )

Wie oben angegeben, kann die transform-originEigenschaft bis zu zwei durch Leerzeichen getrennte Schlüsselwort- oder Längenwerte für eine 2D-Transformation und bis zu drei Werte für eine 3D-Transformation annehmen.

Die Verwendung des obigen Codes für eine 200 x 200 Pixel große Box mit der Transformation, die auf ein mit einem Klick übergegangenes Ereignis angewendet wird, würde sich wie folgt verhalten:

Schauen Sie sich diesen Stift an!

Standardmäßig ist der Ursprung einer Transformation "50% 50%", was genau in der Mitte eines bestimmten Elements liegt. Wenn Sie den Ursprung auf „oben links“ ändern (wie in der obigen Demo), verwendet das Element die obere linke Ecke des Elements als Drehpunkt.

Werte können Längen, Prozentsätze oder die Schlüsselwörter sein top, left, right, bottom, und center.

Der erste Wert ist die horizontale Position, der zweite Wert ist die vertikale und der dritte Wert repräsentiert die Position auf der Z-Achse. Der dritte Wert funktioniert nur, wenn Sie 3D-Transformationen verwenden, und kann kein Prozentsatz sein.

Siehe die Abbildung des Ursprungs der Stifttransformation von Shaw (@shshaw) auf CodePen.