Hoe CSS Transformeert Werk: Orde, Oorsprong en 3D

De eerste keer a rotateY Ik was er zeker van dat ik een kaart in het scherm zou kantelen, maar hem gewoon plat zou slaan, ik verloor het grootste deel van een middag voordat ik begreep waarom. Er was geen perspectief. Ik had de rotatie geschreven, maar niet de enige functie die ervoor zorgt dat een rotatie als diepte wordt gelezen, en CSS deed precies wat ik het vertelde in plaats van wat ik bedoelde. Die middag is de hele reden dat ik nu transformaties bouw door schuifregelaars te slepen en een doos te zien reageren, in plaats van een waarde te typen, op te slaan, te verfrissen en te spuiten.

De CSS transform eigendom is een van de nuttigste dingen in de taal en een van de gemakkelijkste om subtiel fout te raken Het beweegt, draait, schaalt en scheeft een element zonder er iets omheen te verstoren, daarom leunt elk zweveneffect, elke kaartlift, elke ingangsanimatie erop Maar het verpakt veel gedrag in een korte string, de volgorde van de functies verandert het resultaat, en de 3D-functies hebben een afhankelijkheid die onzichtbaar is totdat je erop komt Een waarde die je kunt zien worden gebouwd is veel meer waard dan een waarde die je je moet voorstellen.

de CSS Transform Generator geeft u een schuifregelaar voor elke functie, vertalen, roteren, schalen, scheef en het 3D-trio van rotateX, rotateY en perspectief, en past elke wijziging toe op een live preview-element terwijl u het maakt. Het laat u ook de transformatie-oorsprong instellen, het ankerpunt waar rotaties en schalen omheen draaien. De exacte verklaring bevindt zich in een kopieerklaar vak hieronder, dat alleen de functies bevat die u hebt aangeraakt.

tl;dr: De CSS transform eigenschap repositioneert en hervormt een element zonder de pagina-indeling te beïnvloeden, wat het het juiste hulpmiddel maakt voor zweveneffecten en animatie Functies zijn van rechts naar links van toepassing, dus volgorde is belangrijk; 3D-rotaties hebben een perspective() om er driedimensionaal uit te zien; en elk getransformeerd element wordt een bevattende blok voor zijn vaste en absolute kinderen Deze generator stelt elke functie bloot met een live preview, zendt alleen de functies uit die u wijzigt en produceert schone CSS die u rechtstreeks in een stylesheet kunt plakken. Het draait volledig in uw browser zonder aanmelding.

Welk probleem lost een CSS-transformatiegenerator op?

de transform eigenschap is abstract op dezelfde manier als CSS Grid abstract is U verplaatst pixels niet direct; u beschrijft een geometrische bewerking en laat de browser de uitkomst berekenen. translateX(40px) rotate(15deg) scale(1.1) is een precieze instructie, maar er is geen manier om het resultaat te voelen van het ketenen van die drie uit de tekst alleen Je moet het renderen En renderen in je eigen project betekent de write-save-refresh loop, die langzaam genoeg is dat de meeste mensen stoppen met experimenteren lang voordat ze de waarde hebben gevonden die ze willen.

Een generator klapt die lus tot niets in elkaar Je sleept de draaischuif en de doos draait in real time Je verhoogt de schaal en hij groeit vanuit zijn midden Je voegt een translate toe en hij glijdt terwijl hij aan de beurt blijft Tien minuten hiervan en de relatie tussen de getallen en de beweging stopt met iets wat je in je hoofd vertaalt en wordt iets wat je voelt Als je klaar bent, valt er niets te transcriberen, want de werkende CSS is de hele tijd voor je geschreven.

Er is een tweede voordeel dat er meer toe doet dan het lijkt Het bouwen van de transformatie door manipulatie betekent dat de tool alleen maar geldige, goed gevormde CSS kan uitzenden Je kunt geen gebroken produceren transform waarde door een schuif te slepen, zodat de uitvoer altijd veilig te plakken is Die betrouwbaarheid is de reden waarom ik een plank met visuele CSS-builders dichtbij houd, dezelfde reden waarom ik bereik voor de doosschaduwgenerator in plaats van schaduwoffsets met de hand te tellen.

Waarom is de volgorde van transformatiefuncties belangrijk?

Dit is het enige detail dat mensen het meest naar boven laat reizen, en het is de moeite waard om te begrijpen in plaats van rond te werken. Wanneer je verschillende functies in één opsomt transform, de browser past ze van rechts naar links toe, elk opererend in de coördinatenruimte die de vorige heeft achtergelaten. Dat betekent dat de volgorde echt verandert waar het element terechtkomt.

Neem translateX(100px) rotate(45deg) tegen rotate(45deg) translateX(100px). In de eerste wordt het element honderd pixels vertaald en vervolgens op zijn plaats geroteerd, zodat het honderd pixels naar rechts zit en vijfenveertig graden wordt gedraaid. In de tweede vindt eerst de rotatie plaats, waardoor het element & # 39; s coördinaatassen, en de translate verplaatst het vervolgens honderd pixels langs de gedraaid X-as, diagonaal naar beneden en naar rechts sturen Zelfde twee functies, dezelfde twee waarden, totaal verschillende posities.

De generator zendt zijn functies uit in een bewuste volgorde, perspectief eerst, dan vertalen, dan roteren, dan schalen, dan scheef, wat een verstandige standaard is die ervoor zorgt dat de veelvoorkomende gevallen zich intuïtief gedragen Maar als je eenmaal begrijpt dat volgorde betekenisvol is, begrijp je ook waarom het kopiëren van een transformatie van de ene plaats naar de andere soms een resultaat oplevert dat je niet had verwacht: je hebt de string verplaatst, maar niet het mentale model erachter. Je bouwt het zelf en ziet elke functie en #39;'s bijdrage, is hoe dat model wordt gebouwd.

Hoe laat ik een 3D-transformatie er 3D uitzien?

Hier is de val die me die middag heeft gekost De functies rotateX en rotateY draai een element om de horizontale en verticale assen, die het naar of van je af moeten kantelen als een pagina draait Maar standaard is er geen diepte in de scène, dus wordt de rotatie recht op het vlakke vlak van het scherm geprojecteerd en lijkt het element gewoon samen te drukken A rotateY(60deg) zonder perspectief lijkt het erop dat het element smaller is geworden, niet alsof het is gedraaid.

Het ontbrekende ingrediënt is perspective, en er zijn twee manieren om het te leveren Je kunt een perspective eigenschap op het ouderelement, die een gedeeld verdwijnpunt voor al zijn 3D-kinderen vaststelt, of u kunt een perspective() functie helemaal aan het begin van het element's eigen transform, waardoor dat ene element zijn eigen diepte krijgt Deze generator gebruikt de tweede benadering: stel de perspectiefschuif in en deze zendt uit perspective() eerst in de keten, precies waar het moet zijn Kleinere waarden, ergens tussen de driehonderd en zeshonderd pixels, plaatsen het verdwijnpunt dicht bij het element en maken de diepte dramatisch; grotere waarden maken het effect naar een zachte kanteling af.

De 3D Card preset in de tool is de snelste manier om dit te zien Het stelt een perspectief van zeshonderd pixels en een rotateY van vijfentwintig graden, en de preview box kantelt overtuigend in het scherm Draai de perspectief schuif terug naar nul en zie dezelfde rotatie instorten in een platte squash Dat voor-en-na is de hele les in twee drags.

Wat doet transform-origin?

Elke rotatie en elke schaal heeft een vast punt nodig om rond te draaien, en dat punt is de transformatie-oorsprong. Standaard bevindt het zich in het dode punt van het element, daarom een ongemodificeerd element rotate draait een doos rond het midden en een ongemodificeerde scale laat het in alle richtingen tegelijk naar buiten groeien. Beweeg de oorsprong en beide gedragingen veranderen.

Stel de oorsprong in op top left en een rotatie wordt een zwaai, waarbij het element als een scharnierend bord vanuit de linkerbovenhoek draait. Zet het op bottom en een scaleY groeit het element omhoog vanaf de basis in plaats van het symmetrisch uit te breiden, wat precies is wat je wilt voor een balk die uit de as van een kaart moet stijgen De generator biedt alle negen trefwoordposities, het midden, de vier randen en de vier hoeken, en werkt het voorbeeld bij zodra je er een kiest, dus het verschil tussen een draai en een zwaai is één klik uit elkaar.

Dit is een van die eigenschappen die bijna onzichtbaar is totdat je het nodig hebt, en dan is het het enige dat het effect oplevert waar je naar op zoek bent. Een menu dat zich vanaf de bovenrand moet ontvouwen, een tooltip die moet opschalen uit het element waartoe het behoort, een kaart die om een hoek moet draaien in plaats van om het midden, ze zijn allemaal van transformatie-oorsprong, en geen van hen is duidelijk zichtbaar vanaf de transform waarde alleen.

Waarom duwt transformatie andere elementen niet rond?

Een van de nuttigste eigenschappen van transform is ook degene die mensen het meest verrassend vinden de eerste keer dat het ze bijt Een getransformeerd element heeft geen invloed op de lay-out eromheen Wanneer je een vak veertig pixels naar rechts vertaalt, geeft het veertig pixels naar rechts weer, maar het behoudt nog steeds zijn oorspronkelijke ruimte in de documentstroom, dus niets anders beweegt om de leemte op te vullen en niets wordt opzij geschoven Transform is een verf-tijd effect, toegepast nadat de lay-out al is berekend.

Dit is een functie, geen bug, en het is precies wat transform het juiste hulpmiddel voor animatie maakt Omdat het verplaatsen van een element met transform activeert geen reflow, de browser kan de wijziging op de GPU samenstellen en de animatie op zestig frames per seconde houden Hetzelfde element verplaatsen met top of left of margin dwingt de browser om de lay-out op elk afzonderlijk frame opnieuw te berekenen, wat de meest voorkomende oorzaak is van animatie die frames stottert en laat vallen. Als je vloeiende beweging wilt, animeer je transform en opacity, en je laat de lay-outeigenschappen met rust Wanneer je de omringende inhoud opnieuw moet laten stromen, is dat een teken dat je een lay-outwijziging wilt in plaats van een transformatie, en een hulpmiddel zoals de flexbox generator of de CSS-netgenerator is de juiste plek om te beginnen.

Waarom brak een vast kind in mijn getransformeerde element?

Dit is de gotcha die eruit ziet als een bug in iets dat niets met elkaar te maken heeft, en het is de moeite waard om te weten voordat het je een uur kost. De specificatie zegt dat elk element met een transform waarde anders dan none wordt een insluitblok voor zijn nakomelingen die gepositioneerd zijn fixed of absolute, en het creëert ook een nieuwe stapelcontext. Beide hebben gevolgen die ver van de transformatie zelf naar boven komen.

De containing-block verandering is degene die mensen verrast A position: fixed element wordt verondersteld te verankeren aan de viewport, blijven gezet als de pagina scrollt Maar als een voorouder van dat vaste element een transformatie heeft, verankert het vaste element zich aan die voorouder in plaats daarvan, en plotseling uw & quot; fixed" kop bladert weg met de inhoud of uw modal zit gevangen in een kaart Niets over de transform' s uiterlijk hint hiernaar; het element ziet er prima uit, en iets drie niveaus naar beneden positioneert zichzelf verkeerd Wanneer een vast of absoluut element zich gedraagt alsof het gevangen zit, is het eerste dat moet worden gecontroleerd of een voorouder een transformatie draagt De verandering van de stapelcontext veroorzaakt een parallelle klasse van verwarring, waarbij een z-index dat werkte vroeger ineens niet, want het getransformeerde element verzegelde zijn kinderen in hun eigen stapellaag. Voor de filter eigendom, daarom is de CSS filter generator draagt dezelfde waarschuwing.

Welke functies dekt de generator af, en wanneer bereik je voor elk?

De tool legt de volledige set gemeenschappelijke transformatiefuncties bloot en helpt te weten waar ze voor zijn in plaats van ze willekeurig te slepen. Hier is de kaart.

Functie	Wat het doet	Typisch gebruik
translateX / translateY	Beweegt het element langs een as	Inschuifbare ingangen, zweefduwtjes, offset positionering
rotate	Draait het element om zijn midden (2D)	Gekantelde badges, draaiende laders, speelse zweefhoeken
scale (X en Y)	Groeit of krimpt het element	Zweefzoom, pop-effecten, feedback met druk naar beneden
skewX / skewY	Schudt het element langs een as	Dynamische banners, cursieve vormen, bewegingssignalen
rotateX / rotateY	Draait het element in 3D-ruimte	Kaartflippers, kantelpanelen, cover-flow-effecten
perspective	Voegt diepte toe zodat 3D-rotaties correct worden gelezen	Altijd gepaard met rotateX of rotateY

De twee die een partner nodig hebben zijn de 3D rotaties, die niets overtuigends doen zonder perspectief, en een negatieve schaal, die de moeite waard is om te roepen omdat het niet voor de hand ligt Instelling scaleX naar een negatieve waarde draait het element horizontaal, als een spiegel, en zo werkt de voorinstelling Flip Horizontal. Het is een echt nuttige truc, die een pictogram weerspiegelt in plaats van een tweede actief te exporteren, en het valt rechtstreeks uit de schaalcontrole zodra je weet dat negatieve waarden zijn toegestaan.

Hoe houdt de generator de preview eerlijk?

De faalmodus van elke visuele builder is drift tussen wat de preview laat zien en wat de geëxporteerde code produceert Een tool die zijn preview op de ene manier weergeeft en zijn CSS op een andere manier schrijft is erger dan helemaal geen tool, omdat het je een waarde leert die niet zal reproduceren Deze generator vermijdt dat door het bouwen van de preview' s inline stijl en de gekopieerde declaratie van dezelfde functie, dus wat je ziet is letterlijk wat je plakt Er is geen tweede code pad dat het oneens kan zijn.

Dat is ook de reden waarom de uitvoer alleen de functies bevat die u hebt gewijzigd. Vertrekken scale op zijn identiteit van een, of rotate bij nul betekent dit dat deze functies eenvoudigweg afwezig zijn in de tekenreeks in plaats van als redundant te worden geschreven scale(1) ruis. Een schone transformatie is een transformatie die je in één oogopslag kunt lezen en vertrouwen, en het uitzenden van alleen betekenisvolle functies is dezelfde discipline waarop ik vertrouw in de visuele CSS-tools, van de gradiëntgenerator aan de box-shadow builder Als je een bredere kit aan het monteren bent, dan is de Webontwikkelaar Toolkit verzamelt degene die ik het vaakst open, en de gewoonten achter het goed gebruiken ervan zijn in de Productiviteitstools voor ontwikkelaar guide.

Welke browsers ondersteunen CSS-transformaties?

CSS-transformaties worden ondersteund in elke huidige browser en zijn dat al ruim tien jaar. De 2D-functies, vertalen, roteren, schalen en scheef zetten, zijn universeel en niet vooraf vastgelegd, en de 3D-functies samen met perspective worden even goed ondersteund in Chrome, Firefox, Safari en Edge Het oude -webkit- en -moz- prefixen die ooit nodig waren, zijn vandaag dood gewicht in een stylesheet, en de uitvoer van deze generator is standaard, niet-voorgepredikte CSS die u kunt verzenden zoals geschreven Voor de gezaghebbende regels zijn de CSS Transforms Module Level 1 en Level 2 specificaties van de W3C de primaire bronnen, en ze zijn de moeite waard om te lezen zodra de generator u de intuïtie heeft gegeven om ze te volgen.

Als je daarnaast een bredere visuele toolkit aan het opbouwen bent, zal de grensstraalgenerator en de transitiebouwer zijn natuurlijke metgezellen, aangezien een transformatie op hover bijna altijd een overgang wil om het glad te strijken. Alles hier draait aan de clientzijde, en de CSS die je kopieert is aan jou om te gebruiken zonder runtime, zonder bouwstap en zonder afhankelijkheid.

Veelgestelde vragen

Wat is een CSS-transformatiegenerator?

Een CSS-transformatiegenerator is een visueel hulpmiddel dat een CSS-transformatiewaarde opbouwt op basis van de instellingen die u kiest U past het vertaal-, roteer-, schaal-, scheef- en 3D-perspectief aan met schuifregelaars, en voert de transformatiedeclaratie uit samen met een live preview van het resultaat.

Is de volgorde van transformatiefuncties van belang?

Ja Functies worden van rechts naar links toegepast in het elementcoördinatensysteem, dus vertalen dan draaien is niet hetzelfde als roteren dan vertalen Vertalen verplaatst het element eerst en draait het dan op zijn plaats; draaien draait eerst de assen, dus een latere vertaling stuurt het onder een hoek af.

Hoe laat ik een CSS-transformatie er 3D uitzien?

Een 3D-rotatie heeft perspectief nodig om als diepte te kunnen lezen Voeg een perspectief () functie toe aan het begin van de transformatie, die deze generator uitzendt wanneer u de perspectiefschuif instelt, of zet een perspectiefeigenschap op het bovenliggende element Waarden rond de 300 tot 600 pixels maken de diepte het meest dramatisch.

Wat doet transform-origin?

transform-origin stelt het punt in waar een transformatie om draait en schaalt De standaard is het midden van het element Verplaats het naar een hoek en een rotatie wordt een zwaai vanuit die hoek; verplaats het naar een rand en de schaling groeit vanaf die rand in plaats van naar buiten in elke richting.

Waarom verplaatst transformeren geen andere elementen op de pagina?

Transform is een paint-time effect Het element rendert in zijn nieuwe positie maar reserveert nog steeds zijn originele box in de lay-out, dus er verschuift niets omheen Dat is wat transform ideaal maakt voor animatie, en waarom je marge, positie of een lay-outeigenschap gebruikt wanneer je wel content nodig hebt om opnieuw te kunnen worden gestroomd.

Waarom breekt een vast of absoluut kind in een getransformeerd element?

Elk element met een andere transformatie dan geen wordt een bevattende blok voor zijn vaste en absoluut gepositioneerde nakomelingen en creëert een nieuwe stapelcontext Een positie: vast kind wordt dan verankerd aan de getransformeerde ouder in plaats van de viewport, en de z-indexvolgorde kan veranderen. Beweeg het kind buiten het getransformeerde element als het vast moet blijven zitten aan het scherm.

Moet ik transformatie animeren in plaats van boven, links, breedte of hoogte?

Ja, voor vloeiende beweging. transformatie en dekking worden samengesteld op de GPU en activeren geen lay-out, dus animeren ze met 60 fps. Animeren boven, links, breedte of hoogte dwingt de browser om de lay-out op elk frame opnieuw te berekenen, wat de gebruikelijke oorzaak is van janky-animatie.

Is de gegenereerde transformatie CSS gratis en veilig in gebruik?

Ja. de tool is volledig gratis zonder aanmeldings - of gebruikslimieten, en het zendt standaard, niet-voorafgestelde CSS uit die in elke moderne browser wordt ondersteund Alle verwerking gebeurt in uw browser, dus er wordt niets geüpload en de tool werkt offline zodra deze is geladen.