Funkcija rotacije u CSS: dvodimenzionalna rotacija elementa

Funkcija rotacije () u CSS provodi na elementu dvodimenzionalnu transformaciju rotacije oko fiksnog centra. Blok se ne deformira i ne utječe na položaj susjednih HTML spremnika. Metoda vam omogućuje određivanje kuta rotacije. Osim toga, moguće je odrediti proizvoljni centar rotacije.

Transformacija bloka

U CSS, rotate () je funkcija transformacije, pa se mora prenijeti na svojstvo transformacije elementa.

element {transformacija: rotiranje (45deg) -}

Prvi i jedini argument je kut pri kojem će se objekt rotirati. Rotacija se provodi u dvodimenzionalnom prostoru. Za trodimenzionalne transformacije postoje funkcije u CSS rotateX (), rotateY (), rotateZ () i rotate3d ().

U početku je za njega rezervirano mjesto koje zauzima element na stranici. Vizualni pomak pojavljuje se u novom sloju, bez pomicanja susjednih blokova.

Kut rotacije

Argument prema kutu koji se prenosi na metodu mora biti CSS tipa . Sastoji se od numeričke vrijednosti i mjerne jedinice (s engleskog stupnja).

Pozitivan kut određuje rotaciju objekta u smjeru kretanja u smjeru kazaljke na satu, negativni kut u suprotnom smjeru.

Centar za rotaciju

Prema zadanim postavkama blok se okreće oko svog geometrijskog središta. Da biste promijenili točku, morate upotrijebiti svojstvo transformacije-izvora.

Prema standardu, to traje tri parametra koji određuju koordinate osi X, Y i Z. Međutim, budući da rotirati () u CSS je dvodimenzionalna transformacija, bit će dovoljno da prenosi samo dvije vrijednosti.

element (pretvoriti: rotirati (45deg) -transform-podrijetlo: 20px 100% -}

Koordinata za svaku osu može se definirati u svim validnim jedinicama duljine, postotcima veličine bloka ili ključnim riječima na vrhu, dnu, lijevoj, desnoj strani. Podrijetlo se nalazi u gornjem lijevom kutu pravokutnog spremnika.

Animacija rotacije

Transformacijsko svojstvo može se dinamički mijenjati, stoga CSS omogućuje stvaranje animacije rotacije elemenata u dvodimenzionalnom prostoru.

Ako želite rotirati objekt kao odgovor na određenu korisničku radnju, na primjer, pokazivač miša iznad pokazivača možete koristiti prijelaz CSS imovine, što određuje sporu promjenu vrijednosti drugih svojstava.

element {transition: transform 2s-} element: hover {transform: rotira (180deg) -}

Nijedna se transformacija ne primjenjuje na izvornu elementu, ali kada pokazivač miša držite na njemu, blok će se glatko okrenuti za 180 stupnjeva dvije sekunde. Kada korisnik ukloni pokazivač, pojavit će se ista glatka rotacija u početni položaj.

Složeniji način animiranja objekta je definiranje sekvence promjena okvira za njega pomoću svojstava animacijskih grupa i pravila @keyframes.

Element {animacije-ime: rotirati-animacija-trajanje: 2S-animacija-iteracija-count: beskonačno-animacija-vremena-funkcije: linearni -} @ ključne sličice rotirati {od {transformacija: rotirati (0deg) -} do {transformacije: rotirati (360deg) -}}

Na ovaj element se zakreće animacija koja određuje ukupnu rotaciju od 0 do 360 stupnjeva za dvije sekunde. Animacija-iteracija-broj određuje ponavljanje animacije u beskonačnost i funkciju animacije-vrijeme - glatki učinak prijelaza. Kombinacija imovine u CSS animacija Uz okretanje pretvorbi, možete stvoriti prekrasne dinamičke efekte.