Transformatiefuncties zijn niet verwisselbaar

transform: rotate(45deg) translateX(100px) en transform: translateX(100px) rotate(45deg) zetten het element op twee verschillende plekken. De lijst wordt van links naar rechts toegepast als een keten van wisselingen van coördinatenstelsel, dus in de eerste draait het element en verplaatst het daarna 100px langs zijn eigen inmiddels gekantelde X-as, en komt het rechtsonder uit. In de tweede verplaatst het 100px langs de X-as van de pagina en draait het daarna op zijn plek. Dit is verreweg de meest voorkomende oorzaak van "waarom klopt mijn rotatie niet", en de getallen bijstellen helpt niet, want het probleem is de volgorde.

Onderhuids is elke functie een 4x4-matrix en is de lijst hun product. Matrixvermenigvuldiging is associatief maar niet commutatief, en dat is de formele versie van de alinea hierboven. Het vak matrix laat zien waar de hele lijst op uitkomt; plak die ene matrix3d() in plaats van de functielijst en je krijgt precies dezelfde weergave, en dat is ook wat de browser teruggeeft als je de berekende stijl opvraagt.

Perspectief is wat 3D van een skew scheidt

Een rotateY() zonder perspectief is een orthografische projectie: de verre rand blijft precies even lang als de nabije, dus het element leest als platgedrukt in plaats van gedraaid. perspective() voegt het verdwijnpunt toe. Kleinere waarden geven een sterker effect, want het getal is de afstand van de kijker tot het vlak op z=0: 400px is dramatisch, als een groothoeklens; 1000px tot 1500px is de subtiele stand die de meeste interfaces willen.

Er zijn twee manieren om het te schrijven en die zijn niet hetzelfde. De functie perspective() binnen transform geeft elk element zijn eigen verdwijnpunt recht boven zijn eigen midden. De property perspective op een ouder geeft elk kind één gedeeld verdwijnpunt, en dat wil je voor een groep kaarten die in één scène horen te staan. Deze tool levert de functievorm, want die past in één declaratie.

transform-origin verplaatst het draaipunt

Alles hierboven gebeurt rond een punt, en dat punt staat standaard op het midden van de border box, 50% 50%. Zet het op 0% 100% en een rotatie zwaait het element om zijn linkeronderhoek, en zo worden een deurscharnier, een uitwaaierend menu of een kaart die van een stapel wegklapt gebouwd. Het geldt ook voor scale en skew: schalen vanaf 0% 0% laat een element naar rechtsonder groeien in plaats van vanuit zijn midden naar buiten.

Veelvoorkomende problemen

Tekst wordt wazig na een transformatie. Een verplaatsing die geen heel getal is, of een schaal die het element op een halve pixel laat landen, laat de browser de gerasterde tekst opnieuw bemonsteren. Schaal vanaf een grotere basisgrootte omlaag in plaats van vanaf een kleinere omhoog, of rond de verplaatsing af op hele pixels.
De transformatie doet niets. Hij geldt niet voor inline-elementen die niet vervangen worden. Een kale <span> heeft display: inline-block nodig voordat hij beweegt.
Het 3D-effect valt plat bij de kinderen. Standaard plat elk element zijn nakomelingen af. Zet transform-style: preserve-3d op de ouder, en let erop dat het genegeerd wordt zodra datzelfde element ook overflow: hidden, een filter of een dekking onder 1 heeft.
Een kind met vaste positie is niet meer vast. Elke transformatie behalve none maakt een containing block voor nakomelingen, dus position: fixed daarbinnen wordt vast ten opzichte van het getransformeerde element in plaats van het venster. Dat geldt ook voor filters en will-change: transform.

Veelgestelde vragen

Waarom transform animeren in plaats van top en left?

transform en opacity zijn de twee properties die een browser op de compositor kan animeren, zonder de lay-out te herberekenen of opnieuw te tekenen. top, left, width of margin animeren dwingt elk frame een lay-outronde af voor het element en vaak ook voor zijn buren, en daar komen gemiste frames op een middenklassetelefoon vandaan.

Beïnvloedt een transformatie de lay-out?

Nee. Het element wordt ergens anders getekend maar zijn vak neemt nog steeds de oorspronkelijke ruimte in, dus buren verschuiven niet. Dat is de stippellijn in het voorbeeld hierboven. Het beïnvloedt wel het aanklikken: klikken landen waar het element getekend wordt, niet waar zijn vak zit.

En de losse properties?

translate, rotate en scale bestaan ook als losse properties, en die worden in die vaste volgorde toegepast vóór wat transform zegt. Ze zijn echt handig om één as te animeren zonder de hele waarde te herschrijven, en ze zijn baseline in de huidige browsers. De ene declaratie transform blijft de overdraagbare keuze, en daarom is dat wat deze tool levert.

Kan ik de matrix terugplakken?

Ja. matrix3d() neemt de zestien waarden in kolomvolgorde en is het exacte equivalent van de functielijst ernaast. Hij is onleesbaar in een diff, dus hij is meer waard als controle dan als wat je commit.