CSS transform-origin

CSS transform: Form und Lage ändern und animieren

Per Vorgabe rotiert CSS-Elemente um ihren Mittelpunkt. transform-origin legt einen eigenen Dreh- und Angelpunkt für die Rotation eines Elements fest, entweder durch die Schlüsselwörter top left bottom right und center, durch Prozentangaben oder absolute Werte.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Rotieren um den Angelpunkt: transform-origin

Der Viewport einer HTML-Seite hat ein Koordinatensystem mit dem Ursprung oben links am Punkt (0,0).

Ein transformiertes Objekt hat sein eigenes lokales Koordinatensystem. Der Ursprung eines transformierten Elements ist sein Mittelpunkt.

CSS Koordinatensystem

transform-origin verlagert den Ursprung der Transformation. Ein transformiertes Element kümmert sich nicht um die Grenzen seines umfassenden Elements und verhält sich wie ein absolut positioniertes Element: Es legt sich über alle anderen Elemente.

transform origin Drehpunkt
.rotateTurtle img {
	transform-origin: center center;
	animation: rotateTurtle 10s linear infinite;
}

@keyframes rotateTurtle {
	to { transform:rotate(359deg) }
}

Anstelle der Schlüsselwörter top, left, bottom, right können relative Werte (%) oder absolute Werte (px) eingesetzt werden.

Die Werte müssen nicht zwischen 0% und 100% liegen, sie können auch größer als 100% oder negativ sein, und beziehen sich auf das transformierte Element selbst.

Text rotieren

CSS transform: rotate(xdeg) rotiert den Text genauso wie Bilder um seine Mitte. Und genauso wie bei rotierten Bildern legt sich der Text über den vorangehenden und folgenden Inhalt, wenn der Platz für das rotierte Element nicht freigeschlagen ist.

Einen Text rotieren
Einen Text rotieren
Einen Text rotieren
Einen Text rotieren

Meist wollen wir bei Text aber eine Rotation um die obere oder untere linke Ecke. Diese Ecke sitzt nicht unter dem ersten Zeichen des Textes, sondern maßgeblich ist seine line-height-Box.

Text rotieren
Text rotieren
Text rotieren
Text rotieren
.text {
	font-size:2em;
	line-height: 3em;
	transform-origin: bottom left;
	transform:rotate(-90deg);
}

CSS transform matrix

Wenn eine Transformation aus mehreren Einzelschritten zusammen gesetzt ist, können die Einzelschritte in einer Transformationsmatrix zusammengefasst werden.

Jede Form ist durch die Koordinaten ihre Punkte definiert. Bei einer Transformation betrachtet man die Koordinaten vor der Transformation und die Koordinaten nach der Transformation. Die Erklärungen zu afinen Transformationen bei Wikipedia sind alles andere als intuitiv. Besser verständlich ist die Erklärung bei SVG 1.1 Coordinate Systems