Neun Regler stellen translate, scale, rotate, skew und den Transformationsursprung ein. Die Bühne zeichnet bei jedem Tastendruck neu, und CSS kopieren legt eine saubere transform-Deklaration in die Zwischenablage.
Läuft lokal in deinem BrowserNeun Regler steuern eine zweidimensionale Transformation: translateX und translateY in px (-240 bis 240), scaleX und scaleY (-3 bis 3), rotate (-360 bis 360 Grad), skewX und skewY (-89 bis 89 Grad) sowie die transform-origin-Prozente X und Y (0 bis 100). Jeder Tastendruck zeichnet die Karte auf der Bühne neu, und im Codefeld steht genau die Zeichenfolge, die CSS kopieren in die Zwischenablage legt.
Der Export setzt die Funktionen in fester Reihenfolge zusammen (translate, dann rotate, dann skew, dann scale) und lässt jede Funktion weg, die noch auf ihrem Identitätswert steht; eine unberührte Seite exportiert deshalb transform: none. Eine Browsermessung bestätigte, dass die gekürzte Zeichenfolge dieselbe Matrix ergibt wie die vollständige: translate(77px, 0px) allein und translate(77px, 0px) rotate(0deg) skew(0deg, 0deg) scale(1, 1) berechnen beide matrix(1, 0, 0, 1, 77, 0).
Die Werkbank schreibt zuerst translate(...), dann rotate(...), dann skew(...) und zuletzt scale(...). Funktionen, die noch auf ihrem Identitätswert stehen, entfallen im Export: eine reine Verschiebung exportiert transform: translate(77px, 0px); und wenn nichts gesetzt ist, lautet der Block transform: none; ohne transform-origin-Zeile.
Die Reihenfolge ist nicht kosmetisch. In der Browsermessung ergab translate(100px, 0px) rotate(45deg) die Matrix(0.707107, 0.707107, -0.707107, 0.707107, 100, 0), während rotate(45deg) translate(100px, 0px) matrix(0.707107, 0.707107, -0.707107, 0.707107, 70.7107, 70.7107) ergab: an zweiter Stelle wird die Verschiebung von der Drehung mitgeführt.
Versatz -240 bis 240 px, Skalierung -3 bis 3, Drehung -360 bis 360 Grad, Scherung -89 bis 89 Grad und Ursprung 0 bis 100 %. Während der Eingabe bleibt die Vorschau in diesen Grenzen; beim Verlassen ersetzt die begrenzte Zahl den Feldtext, sodass 999 im Ursprung Y 100 % speichert und -300 in translateX -240 px.
Die neun Felder akzeptieren jeden Schritt, deshalb wird die Skalierung 1.04 der Voreinstellung Tilt nicht als ungültig markiert. Die Scherung endet bei 89 Grad, weil tan(90 Grad) unbegrenzt ist, und die Ursprungsmarkierung kann die Karte nicht verlassen, weil der Ursprung 0-100 % nie verlässt.
Die Seite ist zweidimensional: kein translateZ, rotateX/rotateY, keine Perspektive und keine matrix()-Eingabe, und die Bühne trägt ein einzelnes Element. Der Selektor ist fest (.transformed-element), und das Panel exportiert eine transform-Deklaration plus optionales transform-origin; Ausgaben für Media Queries oder CSS-Variablen gibt es nicht.
Alles läuft in der Seite. Alle neun Felder, die drei abweichenden Voreinstellungen, CSS kopieren und Zurücksetzen erzeugten in der Messung keine einzige Netzwerkanfrage; nur das gemeinsame Analyse-Tag lädt mit der Seite. Bei 390px Breite ist die Karte 118x118 (150x150 am Desktop) mit derselben 12px-Markierung und ohne horizontales Überlaufen.