CSS Transformări 3D. Proprietăți de transformare CSS. CSS Metode de transformare 3D.
Proprietăți de transformare CSS
Următorul tabel listează toate proprietățiile de transformare 3D:
CSS Metode de transformare 3D
Următorul tabel listează toate proprietățiile de transformare 3D:
| Proprietate | Descriere |
|---|---|
| transform | Aplică o transformare 2D sau 3D la un element |
| transform-origin | Vă permite să schimbați poziția asupra elementelor transformate |
| transform-style | Specifică modul în care sunt redate elementele nested în spațiul 3D |
| perspective | Specifică perspectiva asupra modului în care sunt vizualizate elementele 3D |
| perspective-origin | Specifică poziția de jos a elementelor 3D |
| backface-visibility | Vizualizează dacă un element trebuie să fie vizibil atunci când nu este orientat către ecran |
CSS Metode de transformare 3D
| Funcție | Descriere |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Definește o transformare 3D, folosind o matrice 4x4 cu 16 valori |
| translate3d(x,y,z) | Definește o traducere 3D |
| translateX(x) | Definește o traducere 3D, folosind doar valoarea pentru axa X |
| translateY(y) | Definește o traducere 3D, folosind doar valoarea pentru axa Y |
| translateZ(z) | Definește o traducere 3D, folosind doar valoarea pentru axa Z |
| scale3d(x,y,z) | Definește o transformare la scară 3D |
| scaleX(x) | Definește o transformare a scării 3D dând o valoare pentru axa X |
| scaleY(y) | Definește o transformare a scării 3D dând o valoare pentru axa Y |
| scaleZ(z) | Definește o transformare a scării 3D dând o valoare pentru axa Z |
| rotate3d(x,y,z,angle) | Definește o rotație 3D |
| rotateX(angle) | Definește o rotație 3D de-a lungul axei X |
| rotateY(angle) | Definește o rotație 3D de-a lungul axei Y |
| rotateZ(angle) | Definește o rotație 3D de-a lungul axei Z |
| perspective(n) | Definește o vedere în perspectivă pentru un element transformat 3D |