Mai devreme am văzut că CSS ne permite să aplicăm culori, să setăm fonturi, să schimbăm setările de text, să poziționăm elemente, să le decorăm și să le mutăm.
Transformările în CSS reprezintă un set de funcții. care permit un anumit mod de a da elementului o formă:
- traduce. deplasează elementul de-a lungul celor trei axe (x, y și z);
- roti. rotește un element în jurul punctului central;
- scară. modifică dimensiunea elementului;
- distorsiona. distorsionează elementul.
Proprietăți de transformare
Există trei proprietăți disponibile pentru transformare:
- transformă specifică ce funcție va fi folosită (traduce, roti, scară etc.);
- transformarea-origine vă permite să schimbați punctul de început al transformării (funcționează ca poziție de fundal);
- stilul de transformare pentru setările 3D.
Rețineți că spre deosebire de fundal și de frontieră. proprietatea transformată nu este abreviată.
Aici vom folosi doar transformarea.
Nu întrerupe fluxul
Pentru a preveni comportamentul neașteptat, elementele de transformare nu afectează fluxul. Indiferent de rotație, scalare sau mișcare, acestea nu vor afecta alte elemente.
Funcția traducere () vă permite să mutați un element într-un plan (de-a lungul axelor x și y). Acceptă fie:
- un parametru: deplasează elementul de-a lungul axei x;
- doi parametri: prima valoare pentru axa x, a doua pentru axa y.
Acest lucru este similar cu utilizarea poziționării relative cu valorile rămase și de sus.
Să ne reproiectăm animația închisă cu traducătorul. în loc de poziționare stânga / sus:
Amintiți-vă: transformarea este o proprietate de stil. translate () este valoarea (și, în același timp, funcția) care este aplicată acestei proprietăți.
Puteți folosi translateX () și translateY (). pentru a muta elementul de-a lungul axelor x și y, respectiv.
rotate () are un singur parametru, care este valoarea unghiului și este definită în grade (grad), grad (grad), radiani (rad) sau în rotație (o rotație este echivalentă cu un cerc complet).
Funcția scale () vă permite să redimensionați un element. Poate crește sau micșora elementul. Funcția acceptă fie:
- un parametru: schimbarea dimensiunilor elementului în mod egal în înălțime și lățime;
- doi parametri: prima valoare modifică dimensiunea elementului pe orizontală, a doua valoare pe verticală.
Gama de valori posibile:
- 1: elementul își păstrează dimensiunea originală;
- 2: elementul se dublează în dimensiune;
- 0.5: elementul este redus la jumătate;
- 0: Elementul dispare practic (deoarece înălțimea și lățimea lui sunt zero);
- -1: elementul este reflectat.
În ceea ce privește traducerea (). () are versiuni pentru x și y: scaleX () și scaleY (). Pentru a schimba dimensiunea orizontal și respectiv vertical.
Funcția de înclinare () permite deformarea elementului. mutarea laturilor sale de-a lungul liniilor.
Această funcție de conversie este rar utilizată, deoarece consecințele acesteia sunt foarte imprevizibile, iar rezultatul nu este neapărat atractiv. Cu toate acestea, să vedem cum funcționează acest lucru.
Ca scară (). funcția oblice () acceptă fie:
- un parametru: elementul este distorsionat orizontal;
- doi parametri: prima valoare distorsionează elementul pe orizontală, a doua valoare pe verticală.
Ca și rotire (). funcția oblică () ia numai valorile unghiului, cum ar fi gradele (deg).
Funcții 3D
Am văzut cum funcționează funcțiile de transformare pe un avion. de-a lungul axelor x și y.
- La traducere () la doi parametri:
- traduce (x)
- traduce (x, y)
- translateX () numai pentru axa x
- translateY () numai pentru axa y
Dar pentru toate aceste funcții există și versiuni 3D.
De exemplu, pentru traducere (), există o versiune a tradusă3d (). care efectuează transformarea în trei dimensiuni. Aceasta înseamnă că include și axa z (în plus, există o funcție separată translateZ).
Parametrul z determină în principiu elementul să se deplaseze mai aproape și mai mult, în funcție de scăderea sau creșterea valorii. Este ca și cum măriți și micșorați.
Blocul verde crește 200px "în sus" de-a lungul axei z, ca și cum ar fi apropiat de noi.
Elementul parent trebuie să aplice perspectivă: 500 pixeli. astfel încât spațiul tridimensional devine vizibil. Alternativ, puteți transforma: perspectivă (500px).
Trimiteți-le prietenilor: