Çfarë mund të bëjnë transformimet CSS?

Question

Accepted Answer

Vetia `transform` ju lejon të **lëvizni, shkallëzoni, rrotulloni dhe anulloni** një element vizualisht — pa ndikuar në paraqitjen e dokumentit (elementët e tjerë nuk zhvendosen). Ito përshpejtohet nga GPU, duke e bërë atë ideale për animacione.

```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 */
```

## Kombinimi i transformimeve (rendi ka rëndësi)

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

Funksionet e shumta aplikohen në sekuencë; ndryshimi i radhës e ndryshon rezultatin (rrotullimi pastaj zhvendosja ndryshon nga zhvendosja pastaj rrotullimi).

## Pse transformimet nuk shqetësojnë paraqitjen

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

Për dallim nga ndryshimi i `width`/`margin`, një transformim prek vetëm paraqitjen *të pikturuar* të elementit, jo kutinë e tij në rrjedhje — kështu elementët përreth mbeten në vend dhe nuk ka ripërpunim. Kjo është arsyeja përse transformimet janë të qetë.

## Modelet e zakonshme

```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); }
```

Trik i `translate(-50%, -50%)` për qendrimin është kudondoqoftë — zhvendos elementin mbrapa për gjysmën e *madhësisë së tij*.

## Performanca

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

Sepse transformimet kalojnë paraqitjen dhe pikturimin (vetëm kombinimi), animimi i tyre qëndron në 60fps — shumë më lirë se animimi i pozicionit/madhësisë.

## Pse ka rëndësi

Transformimet janë punëtorët e CSS animacioneve dhe mikro-interaksioneve (hedhje me lebra, modalet, karuselet, hapësat e ngarkimit).

Zhvendosin/shkallëzojnë/rrotullojnë pa shkaktuar paraqitje, kështu që janë edhe të fuqishme edhe të ndikuar — mënyra e rekomanduar për animimin e lëvizjeve në web.