Ce pot face transformările CSS?

Question

Accepted Answer

Proprietatea `transform` te permite să **muți, scalezi, rotești și strâmbi** un element vizual — fără a afecta aspectul documentului (alte elemente nu se mișcă). Este accelerat de GPU, ceea ce îl face ideal pentru animație.

```css
.box { transform: translate(50px, 20px); }  /* move right 50px, down 20px */
.box { transform: scale(1.5); }              /* 1.5× bigger (0.5 = half) */
.box { transform: rotate(45deg); }           /* rotate clockwise 45° */
.box { transform: skew(10deg); }             /* slant */
```

## Combinarea transformărilor (ordinea conteaza)

```css
.box {
  transform: translateX(100px) rotate(45deg) scale(1.2);
  /* applied right-to-left: scale, then rotate, then translate */
}
```

Mai multe funcții sunt aplicate în secvență; schimbarea ordinei schimbă rezultatul (rotire apoi translație este diferit de translație apoi rotire).

## De ce transformările nu perturbă aspectul

```css
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
```

Spre deosebire de schimbarea `width`/`margin`, o transformare afectează doar aspectul *picturat* al elementului, nu caseta acestuia în flux — deci elementele din jur rămân pe loc și nu există reflow. Aceasta este exact motivul pentru care transformările sunt ușoare.

## Tipare obișnuite

```css
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* hover lift */
.card:hover { transform: translateY(-4px); }

/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
```

Trucul `translate(-50%, -50%)` pentru centrare este omniprezent — deplasează elementul înapoi cu jumătate din *propria* sa dimensiune.

## Performanță

```css
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
```

Deoarece transformările omit aspectul și pictura (doar compunerea), animația lor rămâne la 60fps — mult mai ieftin decât animarea poziției/dimensiunii.

## De ce conteaza

Transformările sunt forța motrice a animației CSS și a micro-interacțiunilor (hover lifts, modals, carousels, loading spinners).

Ele mișcă/scaleaza/rotesc fără a declanșa aspectul, deci sunt atât puternice, cât și performante — modul recomandat de a anima mișcarea pe web.