CSS-Transformations-Generator

2D-Transformationen operieren nur auf der X- und Y-Achse und beeinflussen Breiten- und Höhenabmessungen. Sie umfassen Drehung, Skalierung, Verzerrung und Verschiebung. 3D-Transformationen fügen die Z-Achse für Tiefe hinzu, wodurch Elemente scheinbar im dreidimensionalen Raum rotieren können. Eigenschaften wie rotateX und rotateY neigen Elemente zum oder vom Betrachter weg. 3D-Transformationen erfordern einen Perspektivwert auf dem übergeordneten Element oder dem Element selbst, um die Illusion von Tiefe zu erzeugen. Ohne Perspektive erscheinen 3D-Rotationen flach. Sowohl 2D- als auch 3D-Transformationen können in einer einzigen Transformations-Eigenschaft kombiniert werden.

Transform-origin legt den Punkt fest, um den Transformationen angewendet werden. Standardmäßig ist es die Mitte des Elements (50% 50%). Wenn Sie es in die obere linke Ecke (0% 0%) ändern, drehen sich die Rotationen um die Ecke statt um die Mitte. Dies ändert drastisch, wie Drehung, Skalierung und Verzerrung aussehen. Zum Beispiel dreht sich eine 45-Grad-Drehung von der Mitte aus auf der Stelle, aber eine Drehung von der oberen linken Ecke schwingt wie eine Tür. Der Ursprung akzeptiert Schlüsselwörter (oben, mitte, unten, links, rechts), Prozentsätze oder Pixelwerte für präzise Kontrolle.

Perspektive definiert den Abstand zwischen dem Betrachter und der Z-Ebene und erzeugt die Illusion von Tiefe für 3D-Transformationen. Ein kleinerer Wert wie 200px erzeugt eine extreme Nahaufnahme-Perspektive, bei der 3D-Effekte dramatisch und verzerrt aussehen. Ein größerer Wert wie 2000px erzeugt eine subtile, entfernte Perspektive. Perspektive kann auf dem übergeordneten Element als Eigenschaft (perspective: 800px) oder auf dem Element selbst als Transformationsfunktion (transform: perspective(800px)) festgelegt werden. Die Methode für übergeordnete Elemente wird bevorzugt, wenn mehrere untergeordnete Elemente denselben 3D-Raum teilen.

Im Jahr 2026 werden herstellerspezifische Präfixe für CSS-Transformationen selten benötigt. Die ungepräfixte `transform`-Eigenschaft wird in allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari, Edge und mobilen Browsern. Das `-webkit-transform`-Präfix war für ältere Safari- und iOS-Versionen vor Safari 9 (2015) erforderlich. Wenn Sie sehr alte Browser unterstützen müssen, kann dieser Generator herstellerspezifische Präfixe als Kommentar in der Ausgabe einschließen. Für die meisten Projekte, die aktuelle Browser ansprechen, ist die ungepräfixte Version ausreichend und der Code ist ohne Präfixe sauberer.