Farbformate umwandeln
HEX-, RGB- und HSL-Farben mit Transparenz umrechnen, als Farbfeld ansehen und als CSS-Wert kopieren.
CSS-Transformationen in 2D und 3D
Verschiebung, Rotation, Skalierung, Scherung und Ursprung einstellen, bei Bedarf um Perspektive und 3D-Werte ergänzen.
3D-Optionen
Vorschau
Die gestrichelte Kontur zeigt die Ausgangsposition. Die Reihenfolge der Transformationen beeinflusst das Ergebnis und ist in Vorschau und CSS identisch.
CSS
Über dieses Tool
Positionieren oder neigen Sie ein Element und vergleichen Sie es mit seinem ursprünglichen Umriss.
Anwendung
Passen Sie X/Y-Verschiebung, Drehung, Achsenskalierung, Scherung und Transformationsursprung an und vergleichen Sie mit dem ursprünglichen Umriss. Aktivieren Sie 3D für Perspektive, Z-Verschiebung und X/Y-Rotation. Kopieren oder speichern Sie transform und transform-origin zusammen.
Vorschau und Ausgabe nutzen dieselben Parameter in fester Reihenfolge. Eine andere Funktionsreihenfolge kann ein anderes Ergebnis erzeugen. Negative Skalierung spiegelt das Element, null lässt die jeweilige Achse zusammenfallen. Das Tool erstellt CSS-Stile, keine 3D-Modelle oder vollständigen Animationen.
Häufige Fragen
Kann ich die Funktionen anders anordnen?
Die Reihenfolge lässt sich im exportierten CSS von Hand ändern; dafür gibt es keine Bedienelemente in der Oberfläche. Vorschau und Export verwenden dieselbe feste Reihenfolge. Eine andere Reihenfolge kann das Ergebnis ändern. Negative Skalierung spiegelt eine Achse; null lässt sie zusammenfallen.
Warum bleibt nach dem Verschieben oder Skalieren der ursprüngliche Platz frei?
CSS-Transformationen verändern die Darstellung, nicht den ursprünglichen Platz im Layout. Benachbarte Inhalte behalten daher ihre Position. Regeln Sie Abstände über das normale Layout. Mit transform-origin wählen Sie den Bezugspunkt für die sichtbare Transformation.
Verwandte Werkzeuge
Wird in einem neuen Tab geöffnet
Kommentare
0