CSS-transform-Generator (drehen, verschieben, skalieren, neigen und 3D)
Bewege die Regler und sieh, wie sich die Karte ändert. Die Reihenfolge der Funktionen im Code ist dieselbe, in der der Browser sie anwendet.
So geht’sDrehen, verschieben und neigen, ohne die Syntax auswendig zu lernen
Verfügbar auf: 
CSS-transform-Generator (drehen, verschieben, skalieren, neigen und 3D): wofür es gut ist
Die Eigenschaft transform verschiebt, dreht, skaliert und neigt Elemente, ohne das Layout der Seite zu berühren, und ist die leichteste Art zu animieren. Bewege die Regler für verschieben, drehen, skalieren, neigen und in 3D drehen, wähle Ursprungspunkt und Perspektive und sieh die Karte sofort ändern.
Der Code kommt in der Reihenfolge, in der der Browser die Funktionen anwendet, und enthält mit der Hover-Option einen sanften Übergang, der auf Maus-Nutzende beschränkt und für alle abgeschaltet ist, die weniger Bewegung wünschen. Die Seite erklärt, warum die Reihenfolge wichtig ist und warum das Animieren von transform leichter ist als das von top, left oder width.
So geht’s
- Bewege die Regler.
- Wähle Ursprung und, bei 3D, die Perspektive.
- Kopiere das CSS.
Wann nutzen
- Hover-Effekte bei Karten.
- Gedrehte und gespiegelte Icons.
- Karten, die sich in 3D umdrehen.
Häufige Fragen
Spielt die Reihenfolge der Funktionen im transform eine Rolle?
Ja. „translateX(100px) rotate(45deg)“ verschiebt und dreht dann an Ort und Stelle; „rotate(45deg) translateX(100px)“ dreht zuerst und geht dann in die schon gedrehte Richtung, und endet an einem anderen Punkt. Der Generator nutzt die Reihenfolge verschieben, drehen, skalieren und neigen, die vorhersehbarste.
Warum transform bei Animationen nutzen?
Transform und opacity sind die günstigsten Eigenschaften zum Animieren: Sie lassen den Browser das Layout der Seite nicht neu berechnen und laufen meist auf der Grafikkarte. Stattdessen top, left, width oder margin zu animieren, lässt die Animation auf schwächeren Handys ruckeln.
Was macht die Perspektive?
Bei 3D-Drehungen (rotateX und rotateY) legt die Perspektive den Abstand des Betrachters fest: Kleine Werte, wie 300px, geben einen starken, verzerrten 3D-Effekt; große Werte, wie 1500px, machen die Drehung sanfter.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.