Transformations-Generator
Erstellen und Vorschau von CSS-Transformationseigenschaften visuell.
CSS Transform ist eine leistungsstarke CSS-Eigenschaft, mit der Sie Webelemente im 2D- oder 3D-Raum transformieren können. Durch Transformationen wie Verschieben, Drehen, Skalieren und Schrägstellen können Sie dynamische und interaktive Webdesigns erstellen. Erstellen Sie einfach die gewünschten Effekte mit Echtzeit-Vorschau.
transform: none;Transformationsfunktionen
- • translate(x, y): translate(x, y): Element um x, y verschieben
- • scale(x, y): scale(x, y): Element um x, y-Verhältnis skalieren
- • rotate(angle): rotate(Winkel): Element um Winkel drehen
- • skew(x, y): skew(x, y): Element um x, y Grad schrägstellen
Verwendungstipps
- • Mehrere Transformationsfunktionen können mit Leerzeichen kombiniert werden
- • Transformationsursprung mit transform-origin ändern
- • Mit Übergang verwenden, um Animationseffekte zu erstellen
- • Perspektiveigenschaft für 3D-Transformationen verwenden
🎯 Grundlegende Konzepte der Transformation
CSS Transform ist eine CSS-Eigenschaft, die die Form, Größe und Position von Elementen ändert. Sie ermöglicht die visuelle Transformation von Elementen, ohne den normalen Dokumentfluss zu stören.
Grundlegende Syntax:
transform: function(value) function(value) ...;📐 Details zur Transformationsfunktion
🔄 Verschieben (Bewegung)
- •
translate(x, y): translate(x, y): Entlang der X-, Y-Achsen verschieben - •
translateX(x): translateX(x): Nur entlang der X-Achse verschieben - •
translateY(y): translateY(y): Nur entlang der Y-Achse verschieben - •
translate3d(x, y, z): translate3d(x, y, z): 3D-Bewegung
transform: translate(50px, 100px);📏 Skalieren (Größenänderung)
- •
scale(x, y): scale(x, y): X-, Y-Achsen skalieren - •
scaleX(x): scaleX(x): Nur X-Achse skalieren - •
scaleY(y): scaleY(y): Nur Y-Achse skalieren - • Größer als 1 vergrößert, kleiner als 1 verkleinert
transform: scale(1.5, 0.8);🔄 Drehen (Rotation)
- •
rotate(angle): rotate(Winkel): Um die Z-Achse drehen - •
rotateX(angle): rotateX(Winkel): Um die X-Achse drehen - •
rotateY(angle): rotateY(Winkel): Um die Y-Achse drehen - • Verwenden Sie die Einheiten deg, rad, turn für Winkel
transform: rotate(45deg);📐 Schrägstellen (Scherung)
- •
skew(x, y): skew(x, y): Entlang der X-, Y-Achsen schrägstellen - •
skewX(angle): skewX(Winkel): Entlang der X-Achse schrägstellen - •
skewY(angle): skewY(Winkel): Entlang der Y-Achse schrägstellen - • In Parallelogrammform umwandeln
transform: skew(15deg, 5deg);🎨 Transformationsursprung (Transformationspunkt)
Die Eigenschaft transform-origin legt den Transformationsursprungspunkt fest. Der Standardwert ist die Mitte des Elements (50 % 50 %).
Verwendung von Schlüsselwörtern
transform-origin: top left;Verwendung von Prozentwerten
transform-origin: 25% 75%;Verwendung von Pixeln
transform-origin: 10px 20px;⚡ Tipps zur Leistungsoptimierung
✅ Empfehlungen
- • Animieren Sie nur Transformation und Deckkraft
- • Verwenden Sie die Eigenschaft will-change
- • Verwenden Sie 3D-Beschleunigung (translateZ(0))
- • Erstellen Sie zusammengesetzte Ebenen für eine bessere Leistung
❌ Zu vermeidende Dinge
- • Animieren von Breite, Höhe
- • Animieren von linken, oberen Positionen
- • Übermäßige Verschachtelung von Transformationen
- • Unnötige Verwendung von will-change
Beispiel für Leistungsoptimierung:
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 Animation und Übergänge
Transform kann mit CSS Transition und Animation verwendet werden, um flüssige Effekte zu erzeugen.
Beispiel für einen Übergang
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}Beispiel für eine Keyframe-Animation
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 Browserkompatibilität
CSS Transform wird in allen modernen Browsern unterstützt, aber für ältere Browser können Anbieterpräfixe erforderlich sein.
Beispiel für ein Anbieterpräfix:
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 Beispiele für die reale Welt
Karten-Hover-Effekt
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}Lade-Spinner
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}Modaler Eingangseffekt
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}Schaltflächen-Klick-Effekt
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 Debugging- und Entwicklungstools
Browser-Entwicklertools
- • Echtzeitbearbeitung im Elemente-Panel
- • Überprüfen Sie die endgültigen Werte im berechneten Tab
- • Leistungsanalyse mit dem Leistungs-Tab
- • Überprüfen Sie die Ebenenstruktur mit der 3D-Ansicht
Nützliche CSS-Eigenschaften
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 Profi-Tipps
Leistungstipp
Die Verwendung von transform3d() oder translateZ(0) zur Erstellung zusammengesetzter Ebenen für die GPU-Beschleunigung kann die Animationsleistung erheblich verbessern.
Barrierefreiheitstipp
Verwenden Sie die Medienabfrage prefers-reduced-motion, um Alternativen für Benutzer bereitzustellen, die auf Bewegung empfindlich reagieren.
Designtipp
Die richtige Einstellung von transform-origin kann natürlichere Transformationseffekte erzeugen.
Entwicklungstipp
Die Verwendung von CSS-Variablen zur dynamischen Steuerung von Transformationswerten erleichtert die JavaScript-Integration.