CSS Transformationsgenerator

Erstellen und kopieren Sie eine 2D-Transformation

1. Bearbeiten Sie die Startdrehung oder fügen Sie eine Transformationsfunktion hinzu. Wählen Sie Einheiten für die Übersetzung aus, aktivieren oder deaktivieren Sie Zeilen und duplizieren oder verschieben Sie sie in der geschriebenen CSS-Reihenfolge.
2. Legen Sie den Ursprung X und Y in Pixeln oder Prozentsätzen fest. Das Beispielrahmenfeld ist 120 x 60 CSS Pixel groß; Prozentwerte verwenden die ursprünglichen Abmessungen vor der Transformation.
3. Überprüfen Sie das aktuelle CSS und die illustrative Vorschau und verwenden Sie dann „CSS kopieren“. Ungültige aktive Entwürfe halten CSS und das transformierte Ziel zurück. Clear entfernt die Funktionen; Durch Zurücksetzen werden die Startdrehung und der zentrierte Ursprung wiederhergestellt.

Ordnungs-, Ursprungs- und Referenzmaße

Die Liste wird in der Reihenfolge CSS geschrieben. Bei einem Punkt wirkt seine Funktion ganz rechts zuerst. Das Verschieben einer Drehung vor oder nach einer Verschiebung kann daher das Ergebnis verändern, selbst wenn beide Werte gleich bleiben.

Die Ausgabe deklariert transform-box: border-box und den aktuellen Transformationsursprung. Prozentuale Übersetzung und Ursprung verwenden den nicht transformierten Rahmen des Elements, nicht sein übergeordnetes Element, den Vorschaurahmen oder seine transformierten Grenzen.

Pixelursprungswerte sind bereits Entfernungen. Ein 50 % horizontaler Ursprung auf der Probe wird als 120 Pixel mal 50 geteilt durch 100 aufgelöst, was 60 Pixel ergibt; vertikal ergibt 60 mal 50 dividiert durch 100 30 Pixel. Eine andere Zielgröße ändert die prozentuale Geometrie.

Eine explizite Identitätsfunktion bleibt in der Ausgabe. Transformationsbezogene Stapel- und Blockierungseffekte können auch dann beibehalten werden, wenn sich Punkte nicht bewegen. Eine leere oder vollständig deaktivierte Liste gibt stattdessen keine aus.

Kompositionsbeispiele

Mit einem Ursprung oben links ordnet translate(30px, -10px) rotate(90deg) den Referenzpunkt (4, 5) auf (25, -6) zu. Die Drehung wirkt auf den Punkt vor der geschriebenen Übersetzung. Das Vertauschen der Reihen ergibt (5, 34).

Bei einem 240 x 80 Pixel großen Rahmen bedeutet translate(-25%, 150%) eine Verschiebung von -60 und 120 Pixel. Prozentsätze werden vor einer Umdrehung immer noch aus der Box aufgelöst.

skew(45deg, -45deg) unterscheidet sich von skewX(45deg) skewY(-45deg). Eine negative Skalierung kann das Beispiel widerspiegeln, während eine Nullskalierung oder eine andere singuläre Transformation es verschwinden lassen kann, ohne dass das erstellte CSS ungültig wird.

Umfangs- und Vorschaubeschränkungen

Dies ist ein begrenztes 2D-Authoring-Tool. Es gibt keine Perspektive, 3D, Animation, beliebigen CSS-Import, Bild-Upload oder vollständigen Matrixrechner. Numerische Bereiche und drei Dezimalstellen sind Werkzeuggrenzen und nicht die gesamte CSS-Grammatik.

Die Vorschau kann ihren festen Rahmen einheitlich auf die Karte skalieren und Inhalte außerhalb dieses Rahmens ausschneiden. Es passt nicht zu jeder transformierten Grenze. Rahmenskalierung, Hilfslinien und Beispielabmessungen werden dem kopierten CSS nicht hinzugefügt.

Verwandelt das Bild, anstatt das normale Layout neu anzuordnen. Unterschiedliche Elementabmessungen, Inhalte und Umgebung CSS können das Ergebnis verändern. Extreme oder nahezu singuläre Kompositionen hängen auch vom nativen Gleitkomma-Rendering ab.

Die Ausgabe behält aktivierte Zeilen, Einheiten und explizite Identitäten bei, ohne sie zu kombinieren oder in eine berechnete Matrix umzuwandeln. Eine ungültige aktive Eingabe oder ein ungültiger Ursprung hält das aktuelle CSS zurück und kopiert, anstatt ein zuletzt gültiges Ergebnis als aktuell anzuzeigen.

Lokales Styling ohne gespeicherte Geschichte

Das Tool fügt keinen Upload, keinen gespeicherten Stilverlauf, keinen eingabetragenden Link oder keine Telemetrie mit Ihren erstellten Werten hinzu. Bestehende Website-Dienste und -Erweiterungen unterliegen keinem allgemeinen Datenschutzversprechen. Die Kopie ist explizit; Ein neues Dokument beginnt mit den Standardeinstellungen.