Funcția de rotire în CSS: rotația bidimensională a unui element

Funcția rotate () din CSS realizează pe element o transformare bidimensională a rotației în jurul unui centru fix. Blocul nu este deformat și nu afectează poziția containerelor HTML vecine. Metoda vă permite să specificați unghiul de rotație. În plus, este posibil să se specifice un centru de rotație arbitrar.

Transformarea blocului

În CSS, rotate () este o funcție de transformare, deci trebuie să fie trecută la proprietatea de transformare a elementului.

element {transform: rotate (45deg) -}

Primul și singurul argument este unghiul la care obiectul va fi rotit. Rotația se realizează în spațiu bidimensional. Pentru transformările tridimensionale, există funcții în CSS rotateX (), rotateY (), rotateZ (), și rotate3d ().

Inițial, locul ocupat de elementul din pagină este rezervat pentru acesta. Deplasarea vizuală are loc într-un nou strat, fără a schimba blocurile adiacente.

Unghi de rotație

Argumentul pentru unghiul transmis metodei trebuie să fie de tip CSS . Se compune dintr-o valoare numerică și o unitate de măsură deg (de gradul în limba engleză).

Un unghi pozitiv determină rotirea obiectului în direcția mișcării în sens orar, unghiul negativ în direcția opusă.

Centrul de rotație

Implicit, blocul este rotit în jurul centrului său geometric. Pentru a schimba acest punct, trebuie să utilizați proprietatea de transformare-origine.

Conform standardului, este nevoie de trei parametri care determină coordonatele axelor X, Y și Z. Cu toate acestea, din moment ce rotate () în CSS este o transformare bidimensională, va fi suficientă pentru a transmite doar două valori.

element {transform: rotate (45deg) -transformare-origine: 20px 100% -}

Coordonatele pentru fiecare axă pot fi definite în orice unități de lungime validă, procente din dimensiunea blocului sau cu cuvintele cheie de sus, de jos, stânga, dreapta. Originea este situată în colțul din stânga sus al containerului dreptunghiular.

Animație de rotație

Proprietatea transformă poate fi modificată dinamic, prin urmare, CSS vă permite să creați o animație de rotire a elementelor în spațiul bidimensional.

Dacă doriți să rotiți un obiect ca răspuns la o anumită acțiune a utilizatorului, de exemplu, plasând cursorul peste cursor, puteți utiliza tranziția proprietății CSS, ceea ce determină o modificare lentă a valorii altor proprietăți.

element {tranziție: transformare 2s-} element: hover {transform: rotate (180deg) -}

Nu sunt aplicate transformări elementului original, dar când plasați cursorul peste el, blocul se va roti ușor cu 180 de grade timp de două secunde. Când utilizatorul îndepărtează cursorul, se va produce aceeași rotire netedă în poziția de pornire.

O modalitate mai complexă de animare a unui obiect este definirea unei secvențe de modificări de cadre pentru acesta utilizând proprietățile grupului de animație și regula @keyframes.

Element {animație-name: roti-animație-durată: 2s-animație-iteratie-count: infinit-animație-sincronizare-funcție: liniar -} @ keyframes roti {din {transforma: rotate (0deg) -} pentru {transforma: roti (360deg) -}}

La acest element se aplică animația de rotire, care determină rotația totală de la 0 la 360 de grade timp de două secunde. Funcția de animație-repetare a proprietăților stabilește repetarea animației la infinit și funcția animație-temporizare-un efect de tranziție lină. Amestecarea proprietății în CSS animație Cu transformări de rotire, puteți crea efecte dinamice frumoase.