transform (translate, rotate, scale, skew) în CSS: explicație, valori și exemple

transform: translateY(-5px); /* ridicare în sus pe axa Y */ transform: translateX(20px); /* deplasare la dreapta */ transform: scale(1.1); /* mărire cu 10% */ transform: rotate(45deg); /* rotire cu 45 de grade */ transform: translate(-50%, -50%); /* centrare absolută */

Ce face `transform (translate, rotate, scale, skew)`

transform permite mutarea, rotirea, redimensionarea sau înclinarea oricărui element.

Marele avantaj al lui transform față de top/left sau margin: nu afectează poziția elementelor din jur și rulează pe placa video (hardware accelerated), asigurând mișcări impecabil de line.

Cele mai folosite funcții:
• translate(x, y): deplasare pe coordonate.
• scale(factor): mărire (ex. 1.2) sau micșorare (ex. 0.8).
• rotate(unghi): rotire (ex. 180deg pentru săgeți de acordeon).

Valori uzuale

Valoare	Descriere
`translate(x, y)`	Deplasează elementul pe axa X și Y.
`scale(n)`	Scalează mărimea (1 = mărime normală).
`rotate(deg)`	Rotește elementul cu un număr de grade.
`skew(deg)`	Înclină elementul pe diagonală.

Exemple

Exemplul 1: Săgeată de acordeon care se rotește lin la deschidere

transform combinat cu transition creează o animație nativă fină.

.sageata-acordeon {
  display: inline-block;
  transition: transform 0.3s ease;
}
details[open] .sageata-acordeon {
  transform: rotate(180deg);
}

Efect vizual în browser

Săgeata este orientată în jos; la deschiderea acordeonului, se rotește lin la 180 de grade cu vârful în sus.

Greșeli frecvente

Scrierea mai multor proprietăți transform separate; dacă scrii transform: translateY(-5px); și mai jos transform: scale(1.1); a doua o va anula complet pe prima. Toate funcțiile trebuie puse în aceeași regulă: transform: translateY(-5px) scale(1.1);.

Comenzi înrudite

transition: Animă fluid schimbarea valorilor CSS între două stări (de exemplu la :hover sau la adăugarea unei clase).
animation și @keyframes: Creează animații complexe și autonome pe baza unor cadre cheie (@keyframes), fără a necesita JavaScript.

Ce face transform (translate, rotate, scale, skew)