Cad is féidir le CSS transforms a dhéanamh?

Question

IT Interview Practice · Accepted Answer

Tugann an `transform` property duit an deis **eilimint a bhogadh, a scála, a rothlú agus a scéimh** go geal — gan difear a dhéanamh ar leagan amach an doiciméad (ní bhogeann eilimintí eile). Tá sé foluain ag GPU, rud a fhágann gur oiriúnach é do beochan.

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

## Transforms a chomhcheangal (tugann an t-ord difear)

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

Cuirtear go leor feidhmeanna i bhfeidhm in ord; má athraíonn tú an t-ord, athraíonn an toradh (tá difear idir rothlú ansin aistriú agus aistriú ansin rothlú).

## Cén fáth nach gcuireann transforms isteach ar an leagan amach

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

Murab ionann agus `width`/`margin` a athrú, ní raibh aon tionchar ag transform ach ar an gealadh *pheintéireachta* an eilimint, ní ar a bhosca san fholuain — fanaigí na heilimintí máguaird ina seasamh agus níl aon athuachairim ann. Is é seo an chúis go díreach gur bhog atá transforms.

## Patrúin choitianta

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

Tá an cleas ionadaíochta `translate(-50%, -50%)` an-choitianta — aistrítear an eilimint siar faoi leith *a méid féin*.

## Feidhmíochta

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

Os rud é go bhfágann transforms an leagan amach agus péint (comhdhéanamh amháin), bíonn tú ábalta 60fps a bhaint amach nuair a bhíonn tú ag beochan — i bhfad níos saoire ná suíomh/méid a bheochan.

## Cén fáth a bhfuil tábhacht air

Is iad transforms an taobh oibre de beochan CSS agus micr-idirghníomhaíochtaí (foluain ar foluain, modúil, carosáin, spinneálacha laodúcháin).

Bogann/scálann/rothlú siad gan leagan amach a bhrostaigint, agus dá bhrí sin tá siad cumhachtach agus éifeachtach — an bealach a bhíonn comhairlithe chun gluaiseacht ar an gréasán a bheochan.

Transforms a chomhcheangal (tugann an t-ord difear)

Cén fáth nach gcuireann transforms isteach ar an leagan amach

Patrúin choitianta

Feidhmíochta

Cén fáth a bhfuil tábhacht air

Ceisteanna gaolmhara