Buna ziua, dragi webmasteri.
O animație rară se face fără transformarea proprietății. Să examinăm mai atent toate caracteristicile acestui instrument CSS uimitor pentru ce și cum se aplică.
Toate exemplele de mai jos vor funcționa când plasați cursorul pe cursor astfel încât să puteți vedea efectul proprietății transformate
Ca bază, luați blocul
În acest cod css vom înlocui proprietatea transformă cu funcțiile (valorile) pe care le efectuează.
Scădere - creștere
a) transforma. scară (0,5); - scalarea elementului pe orizontală și pe verticală. Un număr mai mare decât unul crește; element, și mai puțin de unul - reduce.
b) transforma. scaleX (0,5); - scalarea elementului pe orizontală;
c) transforma. scaleY (0,5); - scalarea elementului vertical;
a) transforma. skewX (30deg); - Înclină elementul într-un unghi specificat vertical (în acest caz cu 30 °). O valoare negativă înclină elementul spre cealaltă parte;
b) transforma. skewY (30deg); - înclină elementul într-un unghi specific orizontal;
deplasare
a) transforma. traduce (50px); - Mută elementul la valoarea specificată orizontal și vertical;
b) transforma. translateX (50px); - Mută elementul pe orizontală. O valoare pozitivă se mută spre dreapta, o valoare negativă spre stânga.
c) transforma. translateY (50px); - Mută elementul pe verticală. O valoare pozitivă se deplasează în jos, o valoare negativă în sus;
a) transforma. rotiți (45deg); - Rotiți elementul în jurul centrului (implicit) în unghiul specificat;
b) transforma. rotateY (360deg); - Rotiți elementul în jurul axei verticale. Se utilizează în 3D și în jurul lui;
c) transforma. rotateX (360deg); - Rotiți elementul în jurul axei orizontale. Este folosit în 3D;
transformare. matrice (); - Creează efectul reflexiei elementului.
Pentru efectul de reflecție în
Tipul de reflexie poate fi modificat prin schimbarea combinației primelor patru cifre prin modificarea acestora de la 1 la -1. Cincea cifră mișcă elementul de-a lungul axei X, al șaselea de-a lungul axei Y.
transforma stil. păstra-3d; - Creează un efect 3D.
Punct de coordonate
transformare origine. x y z; - specifică coordonatele punctului față de centrul în jurul căruia se va roti elementul.
Două valori sunt utilizate în plan (x y), în trei valori 3D (x y z)
E vorba de felul în care se fac lucrurile.
Acum puteți atașa animația elementului cu timpul specificat de execuție și apoi în regula @keyframes specificați proprietatea transformare cu funcția dorită la începutul și la sfârșitul ciclului.
De exemplu: elementul se înclină treptat în timpul animației
Vă urez succes creativ.
Și acum, ce-i mai interesant?
Articole similare
Trimiteți-le prietenilor: