CSS-Transformationsgenerator

Der CSS Transform Generator ist ein visueller Editor für die CSS-Transformationseigenschaft Sie bewegen einen Schieberegler für jede Transformationsfunktion - übersetzen, drehen, skalieren, schief, und die 3 D-Funktionen rotierenX, rotierenY und perspektivisch - und beobachten, wie der Effekt auf ein Vorschauelement in Echtzeit zutrifft, dann kopieren Sie das exakte CSS, das es erzeugt Es lässt Sie auch transform-origin, den Ankerpunkt jeder Drehung und Skala umschwenken.

Die Transformationseigenschaft stellt ein Element wieder her und formt es neu, ohne das Layout darum herum zu stören. Ein übersetztes, gedrehtes oder skaliertes Element nimmt immer noch seinen ursprünglichen Kasten im Fluss ein, sodass sich benachbarte Elemente nicht bewegen, was die Transformation zum richtigen Werkzeug für Schwebeeffekte, Eintrittsanimationen und jede Bewegung macht, die keinen Rückfluss auslösen sollte. Mehrere Funktionen können in einer Deklaration aufgeführt werden, und sie werden von rechts nach links im Koordinatenraum des Elements angewendet, sodass die Reihenfolge das Ergebnis wirklich ändert: Übersetzen, dann drehen, bewegt das Element und dann dreht es an Ort und Stelle, während Drehen, dann zuerst die Achsen verschieben und das Element schräg aussenden.

Alles passiert in Ihrem Browser Beginnen Sie mit einer Voreinstellung wie Grow, Rotate, Flip oder 3 D Card, optimieren Sie jede Funktion, und kopieren Sie die Deklaration Das Tool schreibt nur die Funktionen, die Sie tatsächlich geändert haben, so dass Sie niemals eine redundante Skala (1) oder rotieren (0 deg) Kein Konto, keine Uploads, und es funktioniert offline weiter, sobald die Seite geladen wurde.

Zwei Details sparen echte Debugging-Zeit Erstens sehen 3 D-Drehungen nur dann dreidimensional aus, wenn eine Perspektive vorhanden ist - entweder eine perspektivische () Funktion zuerst in derselben Transformation, wie dieses Werkzeug sie aussendet, oder eine perspektivische Eigenschaft auf dem übergeordneten Element - ansonsten quetscht rotY das Element einfach flach. Zweitens wird jedes Element mit einer anderen als keiner Transformation zu einem enthaltenden Block für seine festen und absolut positionierten Nachkommen und erzeugt einen neuen Stapelkontext, genau wie die Filtereigenschaft. Eine Position: festes Kind innerhalb eines transformierten Elternteils verankert sich an diesem übergeordneten Element und nicht am Ansichtsport, und die Z-Index-Reihenfolge, die zuvor funktioniert hat, kann sich ändern. Wenn eine Transformation ein Layout auf eine Weise unterbricht, hat, hat, ist das Aussehen nichts damit fast immer der Grund.