Das erste Mal ein rotateY Ich war mir sicher, dass ich eine Karte in den Bildschirm kippen würde, indem ich sie stattdessen einfach flach zusammendrückte. Ich verlor den größten Teil eines Nachmittags, bevor ich verstand, warum. Es gab keine Perspektive. Ich hatte die Rotation geschrieben, aber nicht die eine Funktion, die eine Rotation als Tiefe lesen lässt, und CSS tat genau das, was ich ihm gesagt hatte, und nicht das, was ich meinte. An diesem Nachmittag baue ich Transformationen, indem ich Schieberegler ziehe und einer Box zusehe, wie sie antwortet, anstatt einen Wert einzugeben, zu sparen, zu erfrischen und zu blinzeln.
Das CSS transform Eigenschaft ist eines der nützlichsten Dinge in der Sprache und eines der am einfachsten subtil falsch zu machenden Es bewegt, dreht, skaliert und spießt ein Element auf, ohne etwas um es herum zu stören, weshalb jeder Hover-Effekt, jeder Kartenlift, jede Eingangsanimation sich darauf stützt Aber es packt viel Verhalten in eine kurze Zeichenfolge, die Reihenfolge der Funktionen verändert das Ergebnis, und die 3 D-Funktionen haben eine Abhängigkeit, die unsichtbar ist, bis man sie trifft Ein Wert, den man beim Bauen sieht, ist weit mehr wert als ein Wert, den man sich vorstellen muss.
der CSS-Transformationsgenerator Gibt Ihnen einen Schieberegler für jede Funktion, übersetzen, drehen, skalieren, schief und das 3 D-Trio aus rotierenX, rotierenY und Perspektive, und wendet jede Änderung auf ein Live-Vorschauelement an, während Sie sie vornehmen Außerdem können Sie den Transform-Ursprung einstellen, den Ankerpunkt, um den sich Rotationen und Skalierung drehen Die genaue Deklaration befindet sich in einem kopierfertigen Feld unten, das nur die Funktionen enthält, die Sie berührt haben.
tl; dr: Das CSS
transformEigenschaftsrepositionen und - umformungen eines Elements, ohne das Seitenlayout zu beeinträchtigen, was es zum richtigen Werkzeug für Hover-Effekte und Animationen macht Funktionen gelten von rechts nach links, also ist die Reihenfolge wichtig; 3 D-Drehungen benötigen eineperspective()Dreidimensional aussehen; und jedes transformierte Element wird zu einem enthaltenden Block für seine festen und absoluten Kinder Dieser Generator legt jede Funktion mit einer Live-Vorschau offen, sendet nur die Funktionen aus, die Sie ändern, und erzeugt sauberes CSS, das Sie direkt in ein Stylesheet einfügen können. Es läuft vollständig in Ihrem Browser ohne Anmeldung.
Welches Problem löst ein CSS-Transformationsgenerator?
der transform Eigenschaft ist abstrakt in der gleichen Weise wie CSS Grid abstrakt ist Sie bewegen Pixel nicht direkt; Sie beschreiben eine geometrische Operation und lassen den Browser das Ergebnis berechnen. translateX(40px) rotate(15deg) scale(1.1) Ist eine präzise Anweisung, aber es gibt keine Möglichkeit, das Ergebnis der Verkettung dieser drei allein aus dem Text zu spüren Du musst es rendern Und das Rendern in deinem eigenen Projekt bedeutet die Schreib-Speicher-Aktualisierungsschleife, die langsam genug ist, dass die meisten Leute aufhören zu experimentieren, lange bevor sie den gewünschten Wert gefunden haben.
Ein Generator bricht diese Schleife zu nichts zusammen Man zieht den Drehschieber und die Box dreht sich in Echtzeit, man hebt die Skala an und sie wächst aus ihrer Mitte heraus Man fügt eine Übersetzung hinzu und sie gleitet, während sie an der Reihe bleibt Zehn Minuten davon und die Beziehung zwischen den Zahlen und der Bewegung hört auf, etwas zu sein, das man im Kopf übersetzt und zu etwas wird, das man fühlt Wenn man fertig ist, gibt es nichts zu transkribieren, denn das funktionierende CSS wurde die ganze Zeit für einen geschrieben.
Es gibt einen zweiten Vorteil, der wichtiger ist, als er aussieht Der Aufbau der Transformation durch Manipulation bedeutet, dass das Tool immer nur gültiges, wohlgeformtes CSS aussenden kann. Sie können keinen Bruch erzeugen transform Wert durch Ziehen eines Schiebereglers, so dass die Ausgabe immer sicher einzufügen ist Diese Zuverlässigkeit ist, warum ich ein Regal von visuellen CSS-Buildern schließen halte, der gleiche Grund, warum ich für die Kastenschattengenerator Anstatt Schattenversätze von Hand zu zählen.
Warum ist die Reihenfolge der Transformationsfunktionen wichtig?
Das ist das einzige Detail, das die Leute am meisten auf die Probe stellt, und es lohnt sich, es zu verstehen, anstatt herumzuarbeiten Wenn Sie mehrere Funktionen in einer auflisten transform, der Browser wendet sie von rechts nach links an, wobei jeder in dem Koordinatenraum arbeitet, den der vorherige hinterlassen hat Das bedeutet, dass sich die Reihenfolge wirklich dort ändert, wo das Element landet.
Nehmen translateX(100px) rotate(45deg) gegen rotate(45deg) translateX(100px). Im ersten wird das Element um hundert Pixel übersetzt und dann an Ort und Stelle gedreht, so sitzt es hundert Pixel nach rechts und dreht sich um fünfundvierzig Grad. Im zweiten Fall erfolgt zuerst die Drehung, die das Element dreht' s Koordinatenachsen, und die Übersetzung bewegt es dann um hundert Pixel entlang der Gedreht X-Achse, schräg nach unten und rechts senden Gleiche zwei Funktionen, gleiche zwei Werte, völlig unterschiedliche Positionen.
Der Generator gibt seine Funktionen in bewusster Reihenfolge ab, perspektivisch zuerst, dann übersetzen, dann drehen, dann skalieren, dann schief, was eine sinnvolle Voreinstellung ist, die die üblichen Fälle intuitiv verhalten lässt Aber sobald man versteht, dass Ordnung sinnvoll ist, versteht man auch, warum das Kopieren einer Transformation von einem Ort zum anderen manchmal ein Ergebnis bringt, das man nicht erwartet hat: Man hat die Zeichenfolge verschoben, aber nicht das mentale Modell dahinter. Sie selbst zu bauen und jede Funktion zu sehen's Beitrag, so wird dieses Modell aufgebaut.
Wie mache ich eine 3 D-Transformation 3 D aussehen?
Hier die Falle, die mich an diesem Nachmittag gekostet hat Die Funktionen rotateX und rotateY Drehen Sie ein Element um die horizontale und vertikale Achse, die es wie ein Seitenumdrehen zu Ihnen hin oder von Ihnen weg kippen sollte Aber standardmäßig gibt es keine Tiefe in der Szene, so dass die Drehung direkt auf die flache Ebene des Bildschirms projiziert wird und das Element einfach zu komprimieren scheint A rotateY(60deg) Ohne Perspektive sieht es so aus, als wäre das Element schmaler geworden, nicht so, als wäre es gedreht.
Die fehlende Zutat ist perspective‘und es gibt zwei Möglichkeiten, es zu liefern. Sie können ein setzen perspective Eigenschaft auf dem übergeordneten Element, das einen gemeinsamen Fluchtpunkt für alle seine 3 D-Kinder einrichtet, oder Sie können eine hinzufügen perspective() Funktion ganz am Anfang des Elements's eigene transform(was dem einen Element seine eigene Tiefe gibt Dieser Generator verwendet den zweiten Ansatz: Stellen Sie den perspektivischen Schieber ein und er sendet aus perspective() Zuerst in der Kette, genau da wo es sein muss Kleinere Werte, irgendwo zwischen dreihundert und sechshundert Pixel, legen den Fluchtpunkt nahe an das Element und machen die Tiefe dramatisch; größere Werte glätten den Effekt in Richtung einer sanften Neigung.
Die im Tool voreingestellte 3 D Card ist die schnellste Möglichkeit, dies zu sehen, Sie setzt eine Perspektive von sechshundert Pixeln und eine rotateY Fünfundzwanzig Grad, und die Vorschaubox kippt überzeugend in den Bildschirm Schalten Sie den perspektivischen Schieberegler wieder auf Null und beobachten Sie, wie dieselbe Drehung zu einem flachen Squash zusammenfällt Das Vorher-Nachher ist die ganze Lektion in zwei Zügen.
Was bewirkt transform-origin?
Jede Drehung und jede Skala braucht einen festen Punkt, um sich zu drehen, und dieser Punkt ist der Transform-Ursprung, standardmäßig sitzt er im Totpunkt des Elements, weshalb ein unmodifizierter rotate Dreht eine Kiste um die Mitte und eine unveränderte scale Wächst es in alle Richtungen gleichzeitig nach außen. Bewegen Sie den Ursprung und beide Verhaltensweisen ändern sich.
Legen Sie den Ursprung fest top left Und aus einer Drehung wird eine Schaukel, das Element schwenkt wie ein aufklappbares Schild aus seiner oberen linken Ecke. Stellen Sie es auf bottom und a scaleY Wächst das Element von seiner Basis nach oben, anstatt es symmetrisch zu erweitern, was genau das ist, was Sie für einen Balken wünschen, der von der Achse eines Diagramms aufsteigen soll. Der Generator bietet alle neun Schlüsselwortpositionen, die Mitte, die vier Kanten und die vier Ecken, und aktualisiert die Vorschau in dem Moment, in dem Sie einen auswählen, sodass der Unterschied zwischen einem Spin und einem Schwung einen Klick voneinander entfernt ist.
Dies ist eine dieser Eigenschaften, die fast unsichtbar ist, bis Sie sie brauchen, und dann ist es das Einzige, was den Effekt erzeugt, den Sie anstreben. Ein Menü, das sich von der Oberkante aus entfalten sollte, ein Tooltip, der aus dem Element herausskalieren sollte, zu dem es gehört, eine Karte, die sich um eine Ecke statt um die Mitte drehen sollte, alle sind transformierten Ursprungs und keiner von ihnen ist von der Seite aus sichtbar transform Wert allein.
Warum drückt Transform nicht andere Elemente herum?
Eine der nützlichsten Eigenschaften von transform Ist auch diejenige, die die Leute am meisten überrascht, wenn sie sie zum ersten Mal beißen Ein transformiertes Element beeinflusst nicht das Layout um es herum Wenn Sie eine Box vierzig Pixel nach rechts übersetzen, rendert es vierzig Pixel nach rechts, behält aber dennoch seinen ursprünglichen Platz im Dokumentenfluss vor, sodass sich nichts anderes bewegt, um die Lücke zu füllen, und nichts beiseite geschoben wird Transform ist ein Malz-Zeit-Effekt, angewendet, nachdem das Layout bereits berechnet wurde.
Das ist ein Feature, kein Bug, und genau das macht die Transformation zum richtigen Werkzeug für die Animation Denn ein Element mit verschieben transform Triggert keinen Reflow aus, der Browser kann die Änderung auf der GPU zusammensetzen und die Animation bei sechzig Bildern pro Sekunde halten Bewegen des gleichen Elements mit top oder left oder margin Zwingt den Browser, das Layout auf jedem einzelnen Frame neu zu berechnen, was die häufigste Ursache für Animationen ist, die stottern und Frames fallen lassen. Wenn Sie eine reibungslose Bewegung wünschen, animieren Sie transform und opacity‘und Sie lassen die Layout-Eigenschaften in RuheWenn Sie den umgebenden Inhalt zum Reflow benötigen, ist das ein Zeichen, dass Sie eine Layoutänderung statt einer Transformation wünschen, und ein Tool wie das Flexbox-generator oder die CSS-Gittergenerator Der richtige Ort ist, um damit anzufangen.
Warum ist ein feststehendes Kind in mein verwandeltes Element eingebrochen?
Dies ist der gotcha, der wie ein bug in etwas nicht zusammenhangslos aussieht, und es lohnt sich zu wissen, bevor es kostet sie eine stunde Die spezifikation sagt, dass jedes element mit einem transform Wert außer none Block für seine Nachkommen wird, die positioniert werden fixed oder absolute‘und es schafft auch einen neuen Stapelkontext Beides hat Konsequenzen, die weit entfernt von der Transformation selbst auftauchen.
Die Änderung des Halteblocks ist diejenige, die Menschen überrascht. A position: fixed Element soll sich am Ansichtsfenster verankern und beim Blättern der Seite an Ort und Stelle bleiben. Wenn jedoch ein Vorfahre dieses festen Elements eine Transformation hat, verankert sich das feste Element daran jenem Vorfahren Stattdessen, und plötzlich Ihr & quot; fixed" Header scrollt mit dem Inhalt weg oder Ihr Modal ist in einer Karte gefangen Nichts über die transform' s-Erscheinung deutet darauf hin; das Element sieht gut aus, und etwas drei Ebenen nach unten positioniert sich falsch Wenn sich ein festes oder absolutes Element so verhält, als wäre es gefangen, ist das erste, was überprüft, ob ein Vorfahre eine Transformation trägt Die Stapelkontextänderung verursacht eine parallele Klasse von Verwirrung, bei der a z-index Das früher funktionierte plötzlich nicht mehr, denn das transformierte Element versiegelte seine Kinder in ihrer eigenen Stapelschicht. Genau das gleiche Verhalten gilt für die filter Eigentum, weshalb die CSS-Filtergenerator Die gleiche Warnung trägt.
Welche Funktionen deckt der Generator ab und wann greifen Sie zu den einzelnen Funktionen?
Das Tool stellt den gesamten Satz gemeinsamer Transformationsfunktionen bereit und hilft zu wissen, wofür die einzelnen Funktionen gedacht sind, anstatt sie zufällig zu ziehen. Hier ist die Karte.
| Funktion | Was es tut | Typische Verwendung |
|---|---|---|
translateX / translateY |
Bewegt das Element entlang einer Achse | Einschiebeeingänge, Schwebestöße, versetzte Positionierung |
rotate |
Dreht das Element um seine Mitte (2 D) | Kippabzeichen, Spinnlader, verspielte Schwebewinkel |
scale (X und Y) |
Wächst oder verkleinert das Element | Hover-Zoom, Pop-Effekte, Rückmeldung nach unten drücken |
skewX / skewY |
Schrägt das Element entlang einer Achse | Dynamische Banner, kursive Formen, Bewegungshinweise |
rotateX / rotateY |
Dreht das Element im 3 D-Raum | Kartenklappen, Kippplatten, Cover-Flow-Effekte |
perspective |
Fügt Tiefe hinzu, damit 3 D-Drehungen richtig gelesen werden | Immer gepaart mit rotX oder rotY |
Die beiden, die einen Partner brauchen, sind die 3 D-Rotationen, die ohne Perspektive nichts überzeugend machen, und eine negative Skala, die es wert ist, aufgerufen zu werden, weil sie nicht offensichtlich ist Einstellung scaleX Auf einen negativen Wert dreht das Element horizontal, wie ein Spiegel, so funktioniert die Voreinstellung von Flip Horizontal Es ist ein wirklich nützlicher Trick, ein Symbol zu spiegeln, anstatt einen zweiten Vermögenswert zu exportieren, und es fällt direkt aus der Skalensteuerung, sobald Sie wissen, dass negative Werte erlaubt sind.
Wie hält der Generator die Vorschau ehrlich?
Der Fehlermodus eines beliebigen visuellen Builders ist Drift zwischen dem, was die Vorschau anzeigt und dem, was der exportierte Code erzeugt Ein Tool, das seine Vorschau in eine Richtung rendert und sein CSS in eine andere schreibt, ist schlechter als gar kein Tool, denn es lehrt einen Wert, der sich nicht reproduzieren lässt Dieser Generator vermeidet das, indem er die Vorschau erstellt' s inline-Stil und die kopierte Deklaration von derselben Funktion, also was Sie sehen, ist buchstäblich das, was Sie einfügen Es gibt keinen zweiten Codepfad, der anderer Meinung sein könnte.
Auch deshalb enthält die Ausgabe nur die von Ihnen geänderten Funktionen Verlassen scale Bei seiner Identität eines, oder rotate Bei Null bedeutet dies, dass diese Funktionen einfach nicht in der Zeichenfolge vorhanden sind und nicht als redundant geschrieben werden scale(1) Rauschen. Eine saubere Transformation ist eine, die man auf einen Blick und vertrauensvoll lesen kann, und nur sinnvolle Funktionen auszusenden, ist dieselbe Disziplin, auf die ich mich bei allen visuellen CSS-Tools verlasse, von der Gradientengenerator Zum Box-Shadow-Builder Wenn Sie einen breiteren Bausatz zusammenbauen, wird die Webentwickler-Toolkit Sammelt die, die ich am häufigsten öffne, und die Gewohnheiten, die dahinter stehen, sie gut zu verwenden, sind in der Entwicklerproduktivitätstools Führung.
Welche Browser unterstützen CSS-Transformationen?
CSS-Transformationen werden in jedem aktuellen Browser unterstützt und das schon seit weit über einem Jahrzehnt, die 2 D-Funktionen, übersetzen, drehen, skalieren und schief, sind universell und vorbestimmt, und die 3 D-Funktionen zusammen mit perspective Werden in Chrome, Firefox, Safari und Edge gleichermaßen gut unterstützt Die alten -webkit- und -moz- Präfixe, die früher nötig waren, sind heute in einem Stylesheet Eigengewicht, und die Ausgabe dieses Generators ist Standard, vorfixiertes CSS, das Sie wie geschrieben versenden können Für die maßgeblichen Regeln sind die CSS Transforms Module Level 1 und Level 2 Spezifikationen aus dem W3 C die primären Quellen, und sie sind lesenswert, sobald der Generator Ihnen die Intuition gegeben hat, ihnen zu folgen.
Wenn Sie daneben ein breiteres visuelles Toolkit entwickeln, ist die Grenzradiusgenerator und der Transition Builder sind natürliche Begleiter, da eine Transformation im Hover fast immer einen Übergang wünscht, um sie zu glätten Alles läuft hier clientseitig, und das CSS, das Sie kopieren, können Sie ohne Laufzeit, ohne Build-Schritt und ohne Abhängigkeit verwenden.
Häufig gestellte Fragen
Was ist ein CSS-Transformationsgenerator?
Ein CSS-Transformationsgenerator ist ein visuelles Werkzeug, das aus den von Ihnen gewählten Einstellungen einen CSS-Transformationswert erstellt. Sie passen die Übersetzung, Drehung, Skalierung, Schiefe und 3 D-Perspektive mit Schiebereglern an und geben die Transformationsdeklaration zusammen mit einer Live-Vorschau des Ergebnisses aus.
Spielt die Reihenfolge der Transformationsfunktionen eine Rolle?
Ja. Funktionen werden im Elementkoordinatensystem von rechts nach links angewendet, also verschieben dann drehen ist nicht dasselbe wie drehen dann verschieben Übersetzen bewegt das Element zuerst und dreht es dann an Ort und Stelle; Drehen dreht zuerst die Achsen, so dass ein späteres Übersetzen es schräg aussendet.
Wie mache ich eine CSS-Transformation 3 D aussehen?
Eine 3 D-Drehung braucht Perspektive, um als Tiefe zu lesen Fügen Sie eine perspektivische () Funktion zu Beginn der Transformation hinzu, die dieser Generator aussendet, wenn Sie den perspektivischen Schieberegler einstellen, oder legen Sie eine perspektivische Eigenschaft auf das übergeordnete Element Werte um 300 bis 600 Pixel machen die Tiefe am dramatischsten.
Was bewirkt transform-origin?
Transform-Origin setzt den Punkt, um den sich eine Transformation dreht und skaliert. Standardmäßig ist die Mitte des Elements Bewegen Sie es in eine Ecke und eine Drehung wird zu einer Schwingung aus dieser Ecke; Bewegen Sie es zu einer Kante und die Skalierung wächst von dieser Kante aus und nicht in jede Richtung nach außen.
Warum verschiebt Transform andere Elemente auf der Seite nicht?
Transform ist ein Malz-Zeit-Effekt Das Element rendert in seiner neuen Position, behält aber dennoch seine ursprüngliche Box im Layout vor, sodass sich nichts um es herum verschiebt. Das macht die Transformation ideal für Animationen und warum Sie Margin, Position oder eine Layout-Eigenschaft verwenden, wenn Sie Inhalte zum Reflowing benötigen.
Warum bricht ein festes oder absolutes Kind in ein transformiertes Element ein?
Jedes Element mit einer anderen als keiner Transformation wird zu einem enthaltenden Block für seine festen und absolut positionierten Nachkommen und schafft einen neuen Stapelkontext Eine Position: fixed child verankert sich dann am transformierten Elternteil statt am Ansichtsport, und die z-Index-Reihenfolge kann sich ändern Bewegen Sie das Kind außerhalb des transformierten Elements, wenn es am Bildschirm fixiert bleiben muss.
Soll ich transformieren statt oben, links, Breite oder Höhe animieren?
Ja, für eine reibungslose Bewegung. transform und opacity sind auf der GPU zusammengesetzt und lösen kein Layout aus, also animieren sie mit 60 fps Animation oben, links, Breite oder Höhe zwingt den Browser dazu, Layout auf jedem Frame neu zu berechnen, was die übliche Ursache für scherzhafte Animation ist.
Ist das generierte Transform-CSS frei und sicher zu verwenden?
Ja. Das Tool ist völlig kostenlos ohne Anmelde - oder Nutzungsbeschränkungen, und es sendet standardmäßiges, vorfixiertes CSS aus, das in jedem modernen Browser unterstützt wird. Alle Verarbeitungen finden in Ihrem Browser statt, sodass nichts hochgeladen wird und das Tool nach dem Laden offline funktioniert.
