Me za CSS transforms zai iya yi?

Question

Accepted Answer

Ainiyin `transform` yana ba ku damar **motsa, sikeli, jujjuya, da skew** wani abu a faɗi — ba tare da shawon tafiya na gida (wasu abubuwa ba sa motsa). Ana kondere shi ta GPU, wanda ya sa shi dace don zane-zane.

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

## Haɗa transforms (tsari ya dakata)

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

Ainu aiki da yawa ana amfani da su jere; canja tsari ya canja sakamako (jujjuye sannan motsa ya sha daga motsa sannan jujjuye).

## Me yasa transforms ba sa kasiya tsari

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

Ba kamar canja `width`/`margin`, transform kawai ya affecta *painted* bayyanar abu, ba akwatin sa a cikin jere — saboda haka abubuwan da suke kewaye su zauna a dakinsu kuma babu reflow. Haka ne daidai yasa transforms su kaskantsake.

## Alamu na gida

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

Gasken `translate(-50%, -50%)` yana amfani a hanya - yana motsa abu baya ta rabi na *kanta* girma.

## Karfin aiki

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

Domin transforms suka fita da tsari da jijiya (jiya kawai), zane su sauya akan 60fps — sosai a nisa a fiye da motsa matsayi/girma.

## Me yasa ya tattara

Transforms ne aiki na gida na CSS zane-zane da ƙananan al'amalin hulɗa (hover lifts, modals, carousels, loading spinners).

Suna motsa/sikeli/jujjuya ba tare da fara tsari - don haka suna iko da karfin da kuma jiya - hanyar da ake ba da shawarwaki don zane-zane mota akan gida.