Apa sing bisa ditindakake CSS transforms?

Question

IT Interview Practice · Accepted Answer

Properti `transform` ngidini sampeyan **ngobah, ngandakke, mutir, lan miring** sawijining elemen kanthi visual — tanpa ngaruhi tata letak dokumen (elemen liyane ora geser). Iki dipercepat GPU, dadi ideal kanggo animasi.

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

## Napa iki penting

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

Fungsi-fungsi pirang-pirang diterapake kanthi urutan; ngowahi urutan ngowahi asil (mutir banjur nglipat-lipat beda saka nglipat-lipat banjur mutir).

## Napa transforms ora narik tata letak

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

Beda saka ngowahi `width`/`margin`, transform mung narik aspek *cat* elemen, ora boxé ing alur — dadi elemen sekelingane tetep lan ora ana reflow. Iki persis napa transforms mulus.

## Pola umum

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

Trenginas `translate(-50%, -50%)` tengah-tengan gumawa dimana-mana — iku ngalipat bali elemen saperangan-jumlah katelu.

## Kinerja

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

Amarga transforms langsung tata letak lan cat (cukup compositing), nganimasine tetep 60fps — akeh luwih murah tinimbang nganimasine posisi/ukuran.

## Napa iki penting

Transforms yaiku kuda kerja saka animasi CSS lan mikro-interaksi (hover lifts, modals, karusel, loading spinners).

Iku obah/skala/mutir tanpa ndarani tata letak, dadi nduwe kekuatan lan kinerja — cara sing disaranake kanggo nganimas gerak ing web.

Napa iki penting

Napa transforms ora narik tata letak

Pola umum

Kinerja

Napa iki penting

Pitakon sing gegandhengan