CSS-Werkzeuge/CSS Transform Generator
CSS Transform Generator
CSS-Transformationen visuell mit Übersetzungs-, Rotations-, Skalierungs- und Scherungskontrollen erstellen
Transformationskontrollen
Verschieben
0px
0px
Drehen
0°
Skalieren
1.0
1.0
1.0
Neigen
0°
0°
Vorlagen
Vorschau
Element
Gestrichelte Linie zeigt die Originalposition
CSS-Code
css
Loading...CSS Transform Anleitung
Erfahren Sie mehr über CSS-Transformationen und wie Sie visuelle Effekte erstellen
Was ist CSS Transform?
CSS-Transformationen ermöglichen es Ihnen, die visuelle Darstellung von Elementen durch Verschieben (Übersetzen), Drehen, Skalieren und Neigen zu ändern. Transformationen beeinflussen nicht den Dokumentenfluss - andere Elemente bleiben an Ort und Stelle, während sich das transformierte Element visuell bewegt.
Transformationsfunktionen
- translate(): Elemente horizontal und vertikal verschieben
- rotate(): Elemente um einen Mittelpunkt drehen
- scale(): Elementgröße vergrößern oder verkleinern
- skew(): Elemente entlang der X- und Y-Achsen neigen
Verwendung
- Verwenden Sie die Verschiebungskontrollen zum Bewegen des Elements
- Passen Sie die Rotation an, um das Element zu drehen
- Skalieren Sie, um die Elementgröße zu ändern
- Aktivieren Sie den 3D-Modus für perspektivische Transformationen
Tipps
- Kombinieren Sie mehrere Transformationen für komplexe Effekte
- Verwenden Sie transform-origin, um den Drehpunkt zu ändern
- 3D-Transformationen benötigen perspective auf dem Elternelement
Häufig gestellte Fragen
Was ist der Unterschied zwischen translate und position?
Translate verschiebt ein Element visuell, ohne den Dokumentenfluss zu beeinflussen - andere Elemente bleiben an Ort und Stelle. Position (relative, absolute) kann Layout und Geschwisterelemente beeinflussen. Translate ist auch GPU-beschleunigt, was es besser für Animationen macht.
Wie ändere ich den transform origin?
Verwenden Sie die transform-origin-Eigenschaft, um den Drehpunkt festzulegen. Standard ist 'center center'. Sie können Schlüsselwörter (top, left, center, right, bottom), Prozentsätze oder Pixelwerte verwenden. Zum Beispiel rotiert 'transform-origin: top left' von der oberen linken Ecke.
Warum funktioniert meine 3D-Transformation nicht?
3D-Transformationen benötigen perspective, um Tiefe anzuzeigen. Fügen Sie 'perspective: 1000px' zum Elternelement hinzu. Stellen Sie auch sicher, dass 'transform-style: preserve-3d' gesetzt ist, wenn Sie verschachtelte 3D-Transformationen haben. Der perspective-Wert steuert, wie ausgeprägt der 3D-Effekt erscheint.
Kann ich Transformationen animieren?
Ja, Transformationen sind ideal für Animationen. Verwenden Sie CSS-Übergänge oder Keyframe-Animationen auf der transform-Eigenschaft. Transformationen sind hardwarebeschleunigt und bieten flüssige 60fps-Animationen. Kombinieren Sie mit 'will-change: transform' für beste Leistung.
In welcher Reihenfolge werden Transformationen angewendet?
Transformationen werden von rechts nach links angewendet. 'transform: rotate(45deg) translate(100px)' verschiebt zuerst, dann rotiert. Die Reihenfolge ist wichtig, da jede Transformation die nachfolgenden beeinflusst. Um zu verschieben und dann zu rotieren, verwenden Sie 'transform: translate(100px) rotate(45deg)'.