CSS-Transform-Generator

Erstelle interaktiv eine transform-Deklaration mit Schiebereglern für translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) und skew (X/Y) sowie einem bearbeitbaren transform-origin und einer anpassbaren Vorschau-Boxgröße. Das generierte CSS verwendet translate3d für die Verschiebung, kombiniert scale/rotate/rotateX/rotateY/skew nur, wenn sie geändert wurden, und wird zusammen mit transform-origin ausgegeben.

1. Ziehe die Schieberegler unter Translate, Scale, Rotate und Skew, um einen transform zusammenzustellen; jeder Wert verfügt zudem über ein numerisches Eingabefeld für präzise Eingaben. 2. Passe die Vorschau-Box Size (50–250px) an und bearbeite Transform-Origin (beliebiger CSS-origin-String, Standard 50% 50%). 3. Klicke auf Reset, um alle Werte auf ihre neutralen Standardwerte zurückzusetzen. 4. Klicke auf Copy, um sowohl die transform: ...- als auch die transform-origin: ...-Deklaration zu kopieren.

translateX/Y/Z: -200 bis 200 px, werden als translate3d(x, y, z) zusammengefasst ausgegeben, sobald einer ungleich null ist. scaleX/Y: 0,1 bis 3, werden als scale(x, y) ausgegeben, sobald einer ungleich 1 ist. rotate (Z): -360 bis 360deg. rotateX/Y: -180 bis 180deg. skewX/Y: -60 bis 60deg, werden als skew(x, y) ausgegeben, sobald einer ungleich null ist. Wenn keine Funktion geändert wurde, lautet die Ausgabe transform: none.