CSS Transformări 3D. Proprietăți de transformare CSS. CSS Metode de transformare 3D.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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 |