CSS-Transformationen ändern die Position, Größe und Ausrichtung von Elementen, ohne den Dokumentfluss zu beeinträchtigen. Drehen, Skalieren, Verschieben und Neigen können in einer einzigen Transformationseigenschaft kombiniert werden und werden mit CSS-Übergängen reibungslos animiert.
Ziehen Sie die Schieberegler, um zu sehen, wie jede Transformation in Echtzeit angewendet wird. Das gestrichelte Rechteck zeigt die ursprüngliche Position, während die durchgezogene Karte das transformierte Ergebnis zeigt. Kopieren Sie den vollständigen Transformationswert, wenn Sie zufrieden sind.
Frequently Asked Questions
Q: Was ist der Unterschied zwischen Translate und Position?
Was ist der Unterschied zwischen Translate und Position? Übersetzen verschiebt ein Element visuell, ohne den Layoutfluss zu ändern. Position (oben/links) entfernt das Element aus dem Fluss oder verschiebt gleichrangige Elemente. Übersetzen ist außerdem GPU-beschleunigt und lässt sich schneller animieren.
Q: Beeinflusst die Transformation das Layout?
Beeinflusst die Transformation das Layout? Nein. Transformierte Elemente behalten ihren ursprünglichen Platz im Dokumentfluss, daher kommt es häufig zu Überlappungen und Überläufen. Verwenden Sie Ränder oder Auffüllungen, um Platz zu reservieren.
Q: Kann ich mehrere Transformationen kombinieren?
Kann ich mehrere Transformationen kombinieren? Ja, listen Sie sie durch Leerzeichen getrennt in einer Eigenschaft auf: transform: TranslateX(10px) rotate(45deg) Scale(1.2); Sie gelten im Koordinatensystem von rechts nach links.
Q: Warum ist mein gedrehtes Element verschwommen?
Warum ist mein gedrehtes Element verschwommen? Drehungen in Winkeln, die nicht 90 Grad betragen, verursachen Anti-Aliasing-Artefakte. Das Hinzufügen einer winzigen Skalierung (1,001) oder die Verwendung von will-change:transform kann in einigen Browsern hilfreich sein.
Q: Funktioniert Transformation mit Animation?
Funktioniert Transformation mit Animation? Ja, Transformation ist eine der am günstigsten zu animierenden Eigenschaften. Kombinieren Sie es mit @keyframes oder Übergängen – GPU-Compositing sorgt für einen reibungslosen Ablauf auch auf Mobilgeräten.
Bauhaus-Farben
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.