CSS Transform generator för lata människor.
Ställ in skalan, rotera, översätt och skeva och titta på liveförhandsvisningen för att få önskad vy.
Undvik att ställa in extrema värden för skev-egenskapen eftersom förhandsgranskningen kan täcka inställningspanelen. I den här situationen måste du uppdatera sidan.
Skala, rotera, översätt och skeva
Skala fungerar som om du skulle zooma in och ut det riktade elementet. Det förinställda skalvärdet är 1, vilket fungerar som en multiplikator av den ursprungliga storleken. Det betyder att 0,5 halverar medan 2 fördubbla sektionen.
Rotera elementet med den andra egenskapen som är inställd i grader. Vridning med 180° sätter föremålet upp och ner medan 360° tar är tillbaka till sin ursprungliga upprätt position. Ställ in ett positivt eller negativt värde eller till och med decimaler.
Översätt flyttar elementet med pixlar relaterade till dess ursprungliga position. X-värdet horisontellt medan Y vertikalt när det roterar attribut är noll.
Skeva föremålen på deras horisontella (X) eller vertikala (Y) axel.
CSS-transformation förklaras
Transform CSS-egenskapen låter dig rotera, skala, skeva och översätta ett element. Det ändrar koordinatutrymmet för den visuella CSS-formateringsmodellen.
Definition och användning
Transformegenskapen tillämpar en 2D- eller 3D-transformation på ett element. Den här egenskapen låter dig rotera, skala, flytta, skeva, etc., element.
Webbläsarstöd
Siffrorna i tabellen anger den första webbläsarversionen som fullt ut stöder egenskaper.
Siffror följer av -webkit-, -moz- eller -o- anger den första versionen som fungerade med ett prefix.
Syntax
transform: none|transform-functions|initial|inherit;
