CSS రూపాంతరాలు ఏమి చేయగలవు?

Question

Accepted Answer

`transform` సম్పత్తి మీకు ఒక మూలకను **కదిలించడానికి, స్కేల్ చేయడానికి, తిప్పడానికి మరియు వక్రీకరించడానికి** అనుమతిస్తుంది దృశ్యమానంగా — డాక్యుమెంట్ లేআউట్‌ను ప్రభావితం చేయకుండా (ఇతర మూలకాలు మారవు). ఇది GPU-త్వరణం, అనిమేషన్ కోసం ఆదర్శంగా చేస్తుంది.

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

## రూపాంతరాలను కలపడం (క్రమం ముఖ్యమైనది)

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

బహుళ ఫంక్షన్‌లు క్రమంలో అన్వయించబడతాయి; క్రమం మార్చడం ఫలితం మారుస్తుంది (తిరిగి తరువాత కదిలించడం కదిలించిన తరువాత తిప్పకు భిన్నంగా ఉంటుంది).

## రూపాంతరాలు లేআউట్‌ను ఎందుకు విచలితం చేయవు

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

`width`/`margin` మార్చకుండా భిన్నంగా, రూపాంతరం మూలకం యొక్క *చిత్రీకృత* రూపాన్ని మాత్రమే ప్రభావితం చేస్తుంది, దానిలో సరిపడిన పెట్టెను కాదు — కాబట్టి చుట్టుపక్కల మూలకాలు ఉంటాయి మరియు reflow లేదు. ఇది సరిగ్గా రూపాంతరాలు ఎందుకు మృదువైనవి.

## సాధారణ నమూనాలు

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

`translate(-50%, -50%)` కేంద్రీకరణ ట్రిక్ సర్వత్రా ఉన్నది — ఇది మూలకను దాని *స్వంత* పరిమాణం యొక్క సగం ద్వారా బ్యాక్ చేస్తుంది.

## పనితీరు

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

రూపాంతరాలు లేআউట్ మరియు పెయింట్‌ను స్కిప్ చేయడం కాబట్టి (సమ్మేళన మాత్రమే), వాటిని యానిమేట్ చేయడం 60fps వద్ద ఉంటుంది — స్థానం/పరిమాణం యానిమేట్ చేయడం కంటే చాలా చౌక.

## ఇది ఎందుకు ముఖ్యమైనది

రూపాంతరాలు CSS యానిమేషన్ మరియు సూక్ష్మ-ఇంటరాక్షన్‌ల (hover lifts, modals, carousels, loading spinners) కార్యకర్తలు.

వారు లేআউట్‌ను ట్రిగర్ చేయకుండా కదలిస్తారు/స్కేల్ చేస్తారు/తిప్పారు, కాబట్టి వారు శక్తిశాలి మరియు ప్రభావవంతమైనవారు — వెబ్‌లో కదలిక యానిమేట్ చేసేందుకు సిఫార్సు చేయబడిన మార్గం.