Funkcija vrtenja v CSS: dvodimenzionalna rotacija elementa

Funkcija rotate () v CSS na elementu izvaja dvodimenzionalno preoblikovanje vrtenja okoli fiksnega središča. Blok ni deformiran in ne vpliva na položaj sosednjih vsebnikov HTML. Metoda vam omogoča določitev kota vrtenja. Poleg tega je mogoče določiti poljubno središče vrtenja.

Preoblikovanje bloka

V CSS je rotacija () funkcija transformacije, zato jo je treba prenesti na lastnost transformacije elementa.

element {transformacija: vrtenje (45deg) -}

Prvi in ​​edini argument je kot, po katerem se bo predmet zasukal. Rotacija se izvaja v dvodimenzionalnem prostoru. Za tridimenzionalne transformacije v funkciji CSS rotateX (), rotateY (), rotateZ () in rotate3d ().

Na začetku je mesto, ki ga zaseda element na strani, rezervirano za to. Vizualni premik se pojavi v novi plasti, brez premikanja sosednjih blokov.

Kotni kot

Argument za kot, ki je bil posredovan metodi, mora biti tipa CSS . Sestavljen je iz numerične vrednosti in merske enote (od angleške diplome - stopnje).

Pozitivni kot določi vrtenje predmeta v smeri gibanja v smeri urinega kazalca, negativni kot v nasprotni smeri.

Središče vrtenja

Privzeto se blok vrti okrog geometrijskega središča. Če želite spremeniti to točko, morate uporabiti lastnost transformacijskega izvora.

Po standardu potrebuje tri parametre, ki določajo koordinate vzdolž osi X, Y in Z. Ker pa je rotacija () v CSS dvodimenzionalna preobrazba, je dovolj, da prenese le dve vrednosti.

element {transform: rotiraj (45deg) -transform-izvor: 20px 100% -}

Koordinate za vsako os lahko določite v vseh veljavnih enotah dolžine, odstotkih velikosti bloka ali na vrhu, dnu, levi in ​​desni strani. Izvor se nahaja v zgornjem levem kotu pravokotne posode.

Animacija vrtenja

Lastnosti transformacije se lahko dinamično spremenijo, zato vam CSS omogoča ustvarjanje animacije rotacije elementov v dvodimenzionalnem prostoru.

Če želite zavrteti predmet kot odgovor na določeno dejanje uporabnika, na primer s kazalcem miške nad kazalcem, lahko uporabite prehod s premoženjem CSS, ki določa počasno spremembo vrednosti drugih lastnosti.

element {prehod: preoblikovanje 2s-} element: hover {transform: rotiraj (180deg) -}

Za prvotni element se ne uporabljajo nobene spremembe, ko pa se premaknete na kazalec, se bo blok za dve sekundi enakomerno zasukal za 180 stopinj. Ko uporabnik odstrani kazalec, se bo zgodilo enako gladko vrtenje začetnega položaja.

Zapleten način animiranja predmeta je določiti zaporedje sprememb okvira za to z uporabo lastnosti skupine animacije in pravila @keyframes.

Element {ime-animacija: vrtenje-animacije-trajanje: 2S-animacija-ponovitev štetju: neskončno-animacija-krmiljenja-funkcije: linearni -} ključne slike vrtenje {od {transformacija: vrtenje (0deg) -} do {transformacija: vrtenje (360deg) -}}

Za ta element se uporablja vrtenje animacije, ki določa skupno vrtenje od 0 do 360 stopinj za dve sekundi. Funkcija animacije-iteration-count določa ponovitev animacije do neskončnosti in funkcijo animacije-časovno-časovno nemoten prehodni učinek. Kombinacija nepremičnine v CSS animacija Z zavrtimi transformacijami lahko ustvarite čudovite dinamične učinke.