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ă:
transition: <property> <duration> <timing> <delay>- exemplu:
transition: height liniar 2s, width 1s;- 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
transform: scale(1.2) rotate(30deg);Exemplu:
W1L7
By Academia de Informatică
