Sleep schuifregelaars voor rotate, scale, translate en skew en kopieer de CSS en Tailwind-classes. Behandelt de volgorde van transforms, transform-origin, 3D-kaartflips en vloeiende animatie.
Verplaats, draai, vergroot of verschuif een element schuin met de eigenschap transform: transform: translate(20px, 0) rotate(15deg) scale(1.1) skewX(5deg). Functies worden van rechts naar links toegepast, dus hun volgorde verandert het resultaat. Transforms verschuiven nooit de omringende layout, en ze animeren is goedkoop omdat de browser het werk aan de compositor kan overlaten.
De vier 2D-transformfuncties
Functie
Voorbeeld
Tailwind
translate()
translate(1rem, -50%)
translate-x-4 -translate-y-1/2
rotate()
rotate(45deg)
scale()
scale(1.1)
skew()
skewX(6deg)
Gebruik de schuifregelaars om een transform op te bouwen en zie een kaart reageren, en wissel dan tussen de enkele eigenschap transform en de losse eigenschappen translate, rotate en scale. Verderop staan de demo voor de origin, een 3D-flip waar u met de muis over kunt gaan, recepten voor transitions en een uitleg waarom transforms vloeiend blijven terwijl top en left haperen.
Sleep de schuifregelaars voor translate, rotate, scale en skew. De kaart beweegt en de CSS herschrijft zichzelf.
Kies een transform-origin om te zien welk punt vast blijft terwijl de kaart draait of groeit.
Wissel tussen de gecombineerde transform-shorthand en de losse eigenschappen.
Kopieer de CSS of de Tailwind-classes en plak ze in uw stylesheet of markup.
Centreer een absoluut gepositioneerd vak met top: 50%; left: 50%; translate: -50% -50%. Percentages in translate verwijzen naar het element zelf, niet naar de ouder.
Animeer transform en opacity in plaats van width, height, top of left. Die andere eigenschappen dwingen bij elk frame layoutwerk af.
Rotaties voorbij 360deg zijn toegestaan en doen ertoe bij animatie: rotate(720deg) draait twee keer rond bij een transition vanaf 0.
Voeg will-change: transform alleen toe aan elementen die op het punt staan te animeren, en haal het daarna weg. Het overal laten staan kost geheugen.
Veelgestelde vragen
Waarom doet de volgorde van transformfuncties ertoe?
Elke functie verandert het coördinatenstelsel voor de functies die ervoor geschreven zijn, dus de lijst wordt in feite van rechts naar links toegepast. translate(100px) rotate(45deg) draait het vak en schuift het dan recht naar rechts, terwijl rotate(45deg) translate(100px) het langs de gedraaide, diagonale as schuift.
Wat is het verschil tussen transform: rotate() en de eigenschap rotate?
De eigenschappen rotate, scale en translate zijn losse versies van dezelfde functies. Ze kunnen apart worden ingesteld en geanimeerd, zodat een scale bij hover een elders ingestelde rotatie niet wist. De browser past eerst translate toe, dan rotate, dan scale, en daarna alles in transform.
Beïnvloedt transform de layout of andere elementen?
Nee. Het element houdt zijn oorspronkelijke vak in de layout en buren bewegen niet. Alleen het getekende beeld verandert. Een getransformeerd element maakt wel een nieuwe stacking context en wordt het containing block voor afstammelingen met fixed positie, wat u bij modals kan verrassen.
Hoe spiegel ik een element horizontaal?
Gebruik transform: scaleX(-1) of de eigenschap scale met scale: -1 1. Dat spiegelt het element rond zijn origin, standaard het midden. Voor een 3D-flip die een achterkant toont, draai rond de Y-as binnen een ouder met perspective.
Waarom is mijn getransformeerde tekst wazig?
Fractionele verschuivingen en sommige scale-waarden plaatsen tekens tussen pixels, wat ze zachter maakt, vooral terwijl een animatie loopt. Translate-waarden afronden op hele pixels en schalen naar het eindformaat in plaats van omhoog vanaf een kleiner formaat maakt het resultaat meestal scherper.
Een transformlijst lezen
Een handig denkmodel: begin bij de laatste functie en werk terug naar de eerste, waarbij u het element telkens verplaatst, draait of uitrekt in zijn huidige, al aangepaste assenstelsel. Als een resultaat er verkeerd uitziet, is de lijst omdraaien vaak de oplossing.
Percentages binnen translate() meten de eigen border box van het element. Daarom centreert translate(-50%, -50%) een vak waarvan u de grootte niet vooraf weet.
Waarom transforms vloeiend animeren
Browsers renderen een pagina in fasen: style, layout, paint en composite. Een wijziging van top of width voert de layout opnieuw uit voor het element en vaak ook voor de buren. Een wijziging van transform of opacity kan meestal direct naar compositing springen, waarbij een al getekende laag op de grafische processor wordt verplaatst.
Daarom wijzen richtlijnen voor beweging steeds naar deze twee eigenschappen. Als een animatie frames overslaat, open dan het prestatiepaneel van de browser en zoek naar layout- en paintwerk binnen elk frame.
3D in één alinea
Geef de ouder perspective, bijvoorbeeld 800px, zodat kinderen die op X of Y gedraaid zijn lijken weg te wijken. Kleinere getallen overdrijven de diepte. transform-style: preserve-3d laat geneste kinderen die 3D-ruimte delen, en backface-visibility: hidden verbergt een zijde zodra die wegdraait, en dat is de kern van elke kaartflip.
Elke transformfunctie
2D- en 3D-transformfuncties met hun Tailwind-utilities
Functie
Wat het doet
Tailwind (v3 en v4 tenzij vermeld)
translate(x, y)
Verplaatst langs X en Y
translate-x-4, -translate-y-2, translate-x-[13px]
translateX() / translateY()
Verplaatst op één as
translate-x-1/2, translate-y-full
translateZ(z)
Verplaatst naar de kijker toe of ervan af (vereist perspective)
translate-z-4 (v4)
rotate(a)
Draait met de klok mee over een hoek (deg, turn, rad)
rotate-45, -rotate-12, rotate-[17deg]
rotateX(a) / rotateY(a)
Kantelt in 3D rond de horizontale of verticale as
rotate-x-45, rotate-y-180 (v4)
scale(s) / scale(x, y)
Vergroot of verkleint; negatief spiegelt
scale-110, scale-x-75, -scale-x-100
skew(x, y) / skewX() / skewY()
Zet het element scheef
skew-x-6, -skew-y-3
matrix(a, b, c, d, e, f)
Alle 2D-transforms in één matrix
willekeurige waarde: [transform:matrix(...)]
perspective(d)
Diepte alleen voor dit element
perspective-[800px] op de ouder (v4)
Volgorde van bewerkingen
Dezelfde twee functies in een andere volgorde zetten het vak op een andere plek. Beide blauwe vakken beginnen op dezelfde plek.
Eerst translate dan rotate, tegenover eerst rotate dan translate
In het eerste vak gebeurt de verschuiving langs de X-as van het scherm. In het tweede volgt de verschuiving de gedraaide as, dus het vak komt lager uit.
Losse eigenschappen overschrijven elkaar niet
De hover-regel raakt alleen scale aan, dus de rotate die in de basisregel is ingesteld blijft bestaan. Met de transform-shorthand zou u rotate(-3deg) binnen :hover moeten herhalen.
Dezelfde rotatie, drie origins
De origin is het punt dat vast blijft. center is de standaard; top left laat het vak zwaaien als een deur met het scharnier in de hoek.
3D-kaartflip
Hover of focus om om te draaien (alleen CSS)
perspective op de wrapper geeft diepte, preserve-3d houdt beide zijden in één 3D-ruimte en backface-visibility verbergt de zijde die van u af wijst. Gebruikers die minder beweging willen krijgen een directe wissel.
Transforms combineren met transitions
Optillen bij hover voor kaarten en knoppen
Alleen transform en box-shadow veranderen, en de beweging wordt uitgeschakeld voor lezers die om minder beweging vragen.
Hetzelfde idee in Tailwind
motion-safe: past de hoverbeweging alleen toe als de lezer niet om minder beweging heeft gevraagd.
Wat goedkoop te animeren is
Renderwerk dat ontstaat wanneer een eigenschap verandert (typisch browsergedrag)
Eigenschap
Layout
Paint
Alleen composite
transform, translate, rotate, scale
Nee
Nee (meestal)
Ja
Nee
Nee (meestal)
Ja
background-color, color, box-shadow
Nee
Ja
Nee
width, height, top, left, margin
Ja
Ja
Nee
(geen transform)
Transform-speeltuin
Uitvoerstijl
transform-shorthand
losse eigenschappen
Herstellen
Kaart
Gestippelde omtrek: waar de kaart in de layout staat. Donkere stip: de transform-origin.