Die transform-Eigenschaft lässt dich ein Element verschieben, skalieren, drehen und verzerren — visuell, ohne das Dokumentenlayout zu beeinflussen (andere Elemente rücken nicht ein). Sie ist GPU-beschleunigt und daher ideal für Animationen.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Mehrere Funktionen werden nacheinander angewendet; das Ändern der Reihenfolge ändert das Ergebnis (erst drehen, dann verschieben ist anders als erst verschieben, dann drehen).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
Im Gegensatz zum Ändern von width/margin wirkt sich eine Transformation nur auf das gemalte Aussehen des Elements aus, nicht auf seine Box im Flow — daher bleiben umgebende Elemente an Ort und Stelle und es gibt kein Reflow. Genau das macht Transformationen reibungslos.
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* hover lift */
.card:hover { transform: translateY(-4px); }
/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
Der translate(-50%, -50%)-Zentrierungs-Trick ist allgegenwärtig — er verschiebt das Element um die Hälfte seiner eigenen Größe zurück.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Da Transformationen Layout und Rendering überspringen (nur Compositing), bleibt ihre Animation bei 60fps — viel billiger als das Animieren von Position/Größe.
Transformationen sind das Arbeitstier von CSS-Animationen und Mikro-Interaktionen (Hover-Effekte, Modals, Karussells, Lade-Spinner).
Sie verschieben/skalieren/drehen ohne Layout auszulösen, daher sind sie sowohl leistungsstark als auch effizient — die empfohlene Methode, um Bewegungen im Web zu animieren.