Transform — Tailwind CSS

Scale: scale-50, scale-75, scale-100, scale-110, scale-125, scale-150 Rotate: rotate-0, rotate-1, rotate-2, rotate-3, rotate-6, rotate-12, rotate-45…

Transform mengubah cara elemen digambar: diputar, dibesarkan, atau digeser, tanpa mengubah tempatnya di tata letak. Di Tailwind, tiap gerakan punya class sendiri: rotate-12 memutar, scale-110 membesarkan, translate-x-4 menggeser. Bayangin foto yang ditempel di mading. Kamu bisa memiringkannya, membesarkannya, atau menggesernya sedikit, tapi jatah tempatnya di mading tetap sama, dan foto di sebelahnya gak ikut pindah.

🧪 Tebakan cepat: tiga kotak 64px berjajar: A, B, C. Kotak B diberi scale-150. Apa C terdorong ke kanan? Tebak dulu, jawabannya ada di bagian "Transform gak menggeser tetangga".

Memutar: rotate

Ini kotak miring yang sama dengan di latihan:

<div id="rotated" class="rotate-12 bg-blue-500 text-white p-4 w-32">
  Miring!
</div>

Class	CSS yang dihasilkan	Artinya
`rotate-12`	`rotate: 12deg;`	miring 12 derajat searah jarum jam
`bg-blue-500`	`background-color: var(--color-blue-500);`	background biru dari palet
`text-white`	`color: var(--color-white);`	teks putih (#fff)
`p-4`	`padding: 1rem;`	jarak dalam 16px
`w-32`	`width: 8rem;`	lebar 128px

Angka di belakang rotate- adalah derajat: rotate-45 miring 45 derajat, rotate-90 tegak lurus, rotate-180 terbalik.
Tanda minus di depan class memutar ke arah sebaliknya: -rotate-12 miring 12 derajat berlawanan jarum jam.
Semua gayanya lewat class. Gak ada atribut style sama sekali.
Tailwind v4 menulis putaran ke properti CSS rotate. Tailwind v3 menulisnya sebagai transform: rotate(12deg). Hasilnya di layar sama.

Membesarkan dan menggeser: scale dan translate

Class	CSS yang dihasilkan	Artinya
`scale-75`	`scale: 75% 75%;`	mengecil jadi 75%
`scale-110`	`scale: 110% 110%;`	membesar jadi 110%
`scale-150`	`scale: 150% 150%;`	membesar jadi 150%
`translate-x-1`	`translate: 0.25rem 0;`	geser 4px ke kanan
`translate-x-4`	`translate: 1rem 0;`	geser 16px ke kanan
`translate-y-2`	`translate: 0 0.5rem;`	geser 8px ke bawah
`-translate-x-1/2`	`translate: -50% 0;`	geser ke kiri setengah lebarnya sendiri

Angka di scale- itu persen. scale-100 ukuran normal.
Angka di translate- ikut skala spacing yang sama dengan p- dan w-: tiap 1 langkah = 0,25rem = 4px. Jadi translate-x-1 = 4px, translate-x-4 = 16px, bukan 4px.
Pecahan dihitung dari ukuran elemen itu sendiri. Kotak 64px dengan -translate-x-1/2 geser 32px ke kiri. Ini trik klasik untuk menaruh elemen pas di tengah: absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2.

Transform gak menggeser tetangga

Ini baris kotak yang ada di Lab:

<div class="flex gap-4">
  <div class="size-16 grid place-items-center bg-slate-300">A</div>
  <div class="size-16 grid place-items-center bg-blue-500 text-white scale-150">B</div>
  <div class="size-16 grid place-items-center bg-slate-300">C</div>
</div>

Browser mengatur tata letak dulu: A, B, C masing-masing 64px, dengan jarak 16px. Baru setelah itu B digambar 150%, jadi 96px. B melebar 16px ke kiri dan 16px ke kanan dari tengahnya, lalu menimpa sebagian A dan C. Tapi tempat B di baris tetap 64px, jadi A dan C gak bergeser satu piksel pun.

Itu jawaban tebakannya: C gak terdorong. Kalau mau C benar-benar minggir, ubah ukurannya, misalnya size-24 (96px), bukan transform-nya. rotate- dan translate- juga sama: cuma mengubah gambarnya, bukan jatah tempatnya.

Semua transform berputar dan membesar dari titik tengah elemen. Mau dari pojok? Tambahkan origin-top-left, dan B membesar ke kanan bawah dari pojok kiri atasnya.

Membesar saat hover, dengan transisi

<div class="transition-transform hover:scale-110">
  Membesar saat disorot
</div>

hover:scale-110 cuma berlaku selama kursor ada di atas elemen: kotaknya jadi 110%.
transition-transform bikin perubahannya pelan, 150 milidetik, bukan loncat. transition biasa juga ikut menganimasikan transform.
Tanpa class transisi, kotaknya langsung loncat ke 110% begitu disorot.

⚠️ Jebakan yang sering ketemu

Pakai atribut style. style="transform: rotate(12deg)" memang memutar, tapi latihan ini melatih class. Tulis rotate-12 di atribut class, tanpa style.
Mengira angkanya piksel. translate-x-4 itu 16px, bukan 4px. Yang 4px adalah translate-x-1. Sama dengan padding: p-4 = 16px.
Minus di tempat yang salah. Yang benar -rotate-12 dan -translate-x-4, minusnya di depan. rotate--12 atau rotate-(-12) gak menghasilkan CSS.
Pakai transform buat bikin ruang. scale-150 bikin kotak menimpa tetangganya, gak mendorongnya. Untuk ukuran yang benar-benar memakan tempat, pakai w-, h-, atau size-.

TL;DR: Transform cuma mengubah gambar elemen, bukan tempatnya: tetangganya gak bergeser. rotate-12 miring 12 derajat (-rotate-12 ke arah sebaliknya), scale-110 membesar jadi 110%, translate-x-1 geser 4px ke kanan, karena tiap angka di translate- = 4px. -translate-x-1/2 geser setengah lebarnya sendiri. Semua berputar dari tengah, kecuali kamu tambahkan origin-top-left. Untuk efek hover yang halus, pasangkan hover:scale-110 dengan transition-transform. Di latihan, semuanya lewat class: rotate-12 dan p-4 (padding 16px), tanpa atribut style.