WEB M1

Lecția 7

CSS - Transition

• Se folosește pentru a defini modul de trecere al unui element de la o stare la alta.
• fără javascript, un element își schimbă starea doar prin pseudoclase (hover, active)
• forma generală:

• exemplu:

• Va face tranzitia inaltimii timp de 1 secunda, iar tranzitia latimii se va face în mod liniar, timp de 2 secunde, cu un delay de 1s.
• Tipurile de timig pot fi (default este 'ease'):
  • linear, ease, ease-in, ease-out, ease-in-out
• Dacă avem mai multe proprietăți în tranziție, se specifică opțiuniile pentru fiecare, cu separare prin virgulă

CSS - Transform

• Se definește o transformare vizuală a unui element (2D sau 3D)
• Transformările de bază sunt:
  • scale(x, y), scaleX(x), scaleY(y) - scalare (mărire) pe fiecare axă
  • translate(x, y), translateX(x), translateY(y) - mutare a obiectului pe axe
  • rotate(angle)  - rotație la un anumit unghi (ex. 20deg)
  • skew(x, y), skewX(x), skewY(y) - se înclină obiectul

Exemplu: