Kaj lahko storijo CSS transformacije?

Question

Accepted Answer

Lastnost `transform` vam omogoči **premikanje, spreminjanje velikosti, rotacijo in poševnost** elementa vizualno — brez vpliva na razporeditev dokumenta (drugi elementi se ne premaknejo). To je pospešeno z GPU, zato je idealno za animacije.

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

## Kombiniranje transformacij (vrstni red je importantes)

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

Večkratne funkcije se uporabljajo zapored; sprememba vrstnega reda spremeni rezultat (rotacija nato premikanje se razlikuje od premikanja nato rotacije).

## Zakaj transformacije ne motijo razporeditve

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

Za razliko od spreminjanja `width`/`margin` transformacija vpliva le na *vidni* videz elementa, ne pa na njegov okvir v toku — zato sosednji elementi ostanejo na mestu in ni pretokov. Prav zato so transformacije gladke.

## Pogosti vzorci

```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 `translate(-50%, -50%)` za centriranje je vseprisoten — element premakne nazaj za polovico *njegove lastne* velikosti.

## Zmogljivost

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

Ker transformacije preskočijo razporeditev in risanje (samo kompozicija), animiranje njih ostane pri 60fps — veliko ceneje kot animiranje položaja/velikosti.

## Zakaj je to importance

Transformacije so delavska konja CSS animacij in mikro-interakcij (lebdečih dvigov, modalnih oken, karuselov, nalagalnih vrtilnikov).

Premikajo/skalirajo/rotirajo brez sprožanja razporeditve, zato so tako zmogljive kot učinkovite — priporočeni način za animiranje gibanja na spletnem mestu.