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:

Made with Slides.com