CSS Transform Generator

De CSS Transform Generator is een visuele editor voor de CSS-transformatie-eigenschap U verplaatst een schuifregelaar voor elke transformatiefunctie - vertalen, roteren, schalen, scheef zetten, en de 3D-functies roterenX, roterenY en perspectief - en ziet hoe het effect in realtime van toepassing is op een voorbeeldelement, en kopieert vervolgens de exacte CSS die het produceert. Het laat u ook de transformatie-oorsprong instellen, het ankerpunt draait elke rotatie en schaal rond.

De transformeigenschap herpositioneert en hervormt een element zonder de lay-out eromheen te verstoren Een vertaald, geroteerd of geschaald element neemt nog steeds zijn oorspronkelijke doos in de stroom in beslag, dus aangrenzende elementen bewegen niet, wat transformatie het juiste hulpmiddel maakt voor zweveneffecten, ingangsanimaties en elke beweging die geen reflow zou moeten activeren. Verschillende functies kunnen in één declaratie worden vermeld en ze worden van rechts naar links toegepast in de coördinatenruimte van het element, dus de volgorde verandert het resultaat echt: vertalen, draaien, beweegt het element en draait het vervolgens op zijn plaats, terwijl roteren, vervolgens spint de assen eerst en stuurt het element schuin af.

Alles gebeurt in uw browser Start vanuit een voorinstelling zoals Grow, Rotate, Flip of 3D Card, finetune elke functie, en kopieer de declaratie De tool schrijft alleen de functies die u daadwerkelijk hebt gewijzigd, zodat u nooit een redundante schaal (1) of roteren (0deg) verzendt Geen account, geen uploads, en het blijft offline werken zodra de pagina is geladen.

Twee details besparen echte foutopsporingstijd Eerst zien 3D-rotaties er alleen driedimensionaal uit als er een perspectief aanwezig is - ofwel een perspectief () functie als eerste in dezelfde transformatie, zoals dit gereedschap deze uitzendt, of een perspectiefeigenschap op de ouder - anders roteert Y het element gewoon plat. Ten tweede wordt elk element met een andere transformatie dan geen een blok dat de vaste en absoluut gepositioneerde nakomelingen bevat en creëert het een nieuwe stapelcontext, precies zoals de filtereigenschap. Een positie: vast kind in een getransformeerde ouder verankert voor die ouder in plaats van voor de viewport, en z-indexordening die eerder werkte, kan veranderen Wanneer een transformatie een lay-out verbreekt op een manier die niets te maken heeft met hoe het eruit ziet, is dat het containing-blockgedrag bijna altijd.