CSS transform-origin

CSS transform: Text rotieren

Ein HTML-Element hat ein Koordinatensystem mit dem Ursprung oben links am Punkt (0,0). Ein transformiertes Objekt hingegen hat sein eigenes lokales Koordinatensystem. Der Ursprung eines transformierten Elements ist sein Mittelpunkt: default ist center center.

transform: rotate(xdeg) rotiert also das Element per Vorgabe um seine Mitte. Dabei legt sich der Text über den vorangehenden und folgenden Inhalt, wenn der Platz für das rotierte Element nicht freigeschlagen ist.

.text {
	font-size: 1.2rem;
	width: 280px;
	transform:rotate(-90deg);
	
}

Keyframe-Animation: Element rotieren

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.

Das transformierte Element kennt nur seine eigene Breite und Höhe. Prozent-Angaben bei einer Transformation beziehen sich nur auf die Breite und Höhe des Elements, nicht auf die Werte des umfassenden Blocks.

.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. Wenn also Elemente in Bezug auf ihren umfassenden Container animiert werden, kann man z.B. ein zusätzliches Element als Wrapper einsetzen. Mehr dazu: CSS transform translate.

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