Transform CSS: Geser, Putar, Perbesar, dan Miringkan Elemen

Kamu sudah tahu cara mengatur ukuran dan posisi kotak lewat box model, lalu menatanya dengan Flexbox dan Grid. Tapi adakalanya kamu cuma ingin menggeser sebuah elemen beberapa piksel, memiringkannya sedikit, membesarkannya saat di-hover, atau membaliknya — tanpa merusak tata letak yang baru saja susah payah kamu rapikan. Nah, di situlah property transform berperan.

Dengan transform, kamu bisa menggeser, memutar, memperbesar, dan memiringkan elemen secara visual di tempatnya. Kata kuncinya: secara visual. Elemen yang di-transform memang tampak berbeda, tapi bagi tata letak di sekitarnya, posisinya tetap dianggap di tempat asalnya. Sifat inilah yang bikin transform pas banget buat efek hover, animasi, dan sentuhan-sentuhan kecil yang kalau dikerjakan dengan cara lain bakal bikin pusing. Yuk kita bahas satu per satu.

Apa sebenarnya yang dilakukan transform

Property transform menerima satu atau beberapa fungsi transform sebagai nilainya. Tiap fungsi menjelaskan jenis perubahan — mau digeser, diputar, atau diubah ukurannya — lalu browser menerapkannya supaya elemen tampil berbeda:

.box {
  transform: rotate(15deg);
}

Satu baris itu memiringkan kotak 15 derajat searah jarum jam. Bagian yang sering kelewat di awal: posisi asli elemen di dalam dokumen sama sekali tidak berubah. Elemen lain tetap mengalir di sekitarnya seolah-olah kotak itu masih duduk rata di tempat semula. Transform cuma lapisan visual yang dilukis di atasnya, dan justru karena itulah ia aman dipakai — kamu bisa memutar atau mengecilkan sesuatu tanpa bikin elemen di sekitarnya tiba-tiba meloncat.

translate: menggeser elemen

translate() menggeser elemen di sumbu X (mendatar) dan Y (tegak). X positif menggeser ke kanan, Y positif menggeser ke bawah:

.box {
  transform: translate(40px, 20px);  /* 40px ke kanan, 20px ke bawah */
}

Kalau kamu cuma peduli satu arah saja, pakai translateX() atau translateY():

.box {
  transform: translateX(40px);   /* hanya mendatar */
}

.other {
  transform: translateY(-20px);  /* naik 20px */
}

Kenapa pakai translate ketimbang, misalnya, margin atau top/left? Ada dua alasan. Pertama, ia tidak mengganggu tata letak — menggeser elemen pakai translate tidak akan mendorong-dorong tetangganya. Kedua, ia menerima nilai persen yang dihitung dari ukuran elemen itu sendiri, dan ini membuka trik rata-tengah terkenal yang akan kita bahas sebentar lagi.

scale: mengubah ukuran elemen

scale() memperbesar atau mengecilkan elemen. Nilai 1 berarti ukuran asli, 2 jadi dua kali lipat, 0.5 jadi separuh:

.box {
  transform: scale(1.5);   /* 1,5x lebih besar di kedua arah */
}

Beri dua nilai kalau kamu mau mengatur lebar dan tinggi secara terpisah, atau pakai scaleX() / scaleY() untuk satu sumbu saja:

.box {
  transform: scale(2, 0.5);  /* dua kali lebih lebar, separuh lebih pendek */
}

Scale adalah andalan untuk efek hover — naikkan ukuran gambar atau tombol jadi 1.05 saat kursor mengarah ke sana, dan elemennya langsung terasa hidup tanpa menggeser apa pun di halaman. Perlu diingat, scale ikut meregangkan seluruh isi elemen, termasuk teks dan border, jadi ini zoom visual, bukan perubahan dimensi sebenarnya.

rotate: memutar elemen

rotate() memutar elemen mengelilingi titik tengahnya. Nilainya berupa sudut, biasanya dalam derajat (deg). Positif berputar searah jarum jam, negatif berlawanan:

.box {
  transform: rotate(45deg);    /* searah jarum jam, sekitar seperempat putaran */
}

.badge {
  transform: rotate(-10deg);   /* miring sedikit berlawanan jarum jam */
}

rotate bakal sering kamu pakai: label “Diskon” yang miring, animasi spinner, ikon kecil yang berputar saat menu dibuka. Sudutnya tidak dibatasi sampai 360 — rotate(720deg) memutar dua kali penuh, yang berguna saat kamu menganimasikannya.

skew: memiringkan elemen

skew() memiringkan elemen di sumbu X dan/atau Y, memberi efek condong mirip huruf miring:

.box {
  transform: skew(20deg, 0deg);   /* miringkan secara mendatar */
}

Ada juga skewX() dan skewY() untuk satu sumbu. Skew adalah yang paling jarang dari keempatnya — kebanyakan dipakai untuk efek gaya seperti pembatas seksi yang miring atau “garis kecepatan” bergaya retro. Pakai secukupnya saja; teks yang terlalu dimiringkan cepat jadi susah dibaca.

Menggabungkan beberapa transform

Di sinilah transform jadi makin bertenaga. Kamu bisa merangkai beberapa fungsi dalam satu nilai transform, dipisah spasi, dan browser menerapkan semuanya sekaligus:

.box {
  transform: translateX(50px) rotate(15deg) scale(1.2);
}

Itu menggeser kotak ke kanan, memiringkannya, dan memperbesarnya dalam sekali jalan. Satu hal penting: urutan berpengaruh. Transform diterapkan dari kanan ke kiri dalam hal sistem koordinat, jadi translate() rotate() memberi hasil yang berbeda dari rotate() translate(). Kalau transform gabungan tidak berperilaku seperti yang kamu harapkan, coba tukar urutan fungsinya.

transform-origin: memilih titik poros

Secara bawaan, setiap transform terjadi mengelilingi titik tengah elemen. Property transform-origin memungkinkanmu memindahkan titik poros itu — titik tempat elemen diputar, diperbesar, atau dimiringkan:

.box {
  transform-origin: top left;   /* putar/perbesar dari sudut kiri atas */
  transform: rotate(20deg);
}

Kamu bisa pakai kata kunci (top, bottom, left, right, center), persen, atau ukuran pasti:

.box {
  transform-origin: 0% 100%;    /* sudut kiri bawah */
}

.clock-hand {
  transform-origin: bottom;     /* berporos dari bawah, seperti jarum jam sungguhan */
}

Inilah rahasia di balik hal seperti jarum jam, pintu yang membuka, atau kipas yang berayun dari salah satu sisi alih-alih berputar di tengahnya. Setiap kali sebuah rotasi atau scale terasa “kurang pas”, biasanya transform-origin lah property yang perlu kamu sesuaikan.

Trik rata-tengah yang sempurna

Ingat tadi bahwa translate menerima persen berdasarkan ukuran elemen itu sendiri? Gabungkan itu dengan positioning absolut, dan kamu dapat cara yang super andal untuk menengahkan elemen berukuran berapa pun, bahkan saat kamu belum tahu lebar atau tingginya:

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top: 50% dan left: 50% mendorong sudut kiri atas elemen ke tengah containernya. Lalu translate(-50%, -50%) menariknya kembali sejauh separuh lebar dan tinggi elemen itu sendiri, sehingga ia mendarat pas di tengah. Karena persennya mengacu ke elemennya sendiri, trik ini tetap jalan seberapa pun besar kontennya nanti. Potongan klasik yang layak selalu kamu simpan.

Contoh praktis: kartu yang terangkat saat di-hover

Sekarang kita rangkai jadi sesuatu yang benar-benar bakal kamu pakai — sebuah kartu yang naik dan membesar perlahan saat di-hover:

.card {
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
}

<div class="card">
  <h3>ACY Partner Indonesia</h3>
  <p>Arahkan kursor ke sini untuk melihat efek terangkat.</p>
</div>

Saat di-hover, kartu meluncur naik 8 piksel dan membesar 2% — efek terangkat yang halus dan enak dilihat. Baris transition itulah yang membuatnya beranimasi mulus alih-alih meloncat seketika; kalau kamu mau memahami bagian itu lebih dalam, lihat artikel tentang transition CSS. Transform dan transition itu sahabat karib: transform menjelaskan perubahannya, transition membuat perubahan itu terjadi secara bertahap.

Mengintip transform 3D

Semua yang kita bahas sejauh ini masih 2D, tapi transform juga bisa bekerja dalam tiga dimensi. Fungsi seperti rotateX(), rotateY(), translateZ(), dan perspective memungkinkanmu memiringkan elemen di ruang untuk efek kartu yang membalik dan efek kedalaman:

.scene {
  perspective: 800px;        /* mengatur seberapa "dalam" ruang 3D terasa */
}

.flip-card {
  transform: rotateY(180deg);  /* balik secara mendatar, seperti membalik kartu */
}

Nilai perspective, yang dipasang di elemen induk, mengatur seberapa dramatis efek 3D-nya — angka kecil membuat kedalamannya terasa lebih mencolok, angka besar membuatnya lebih datar. Transform 3D adalah topik yang lebih dalam dengan keunikannya sendiri, tapi dengan tahu bahwa ini ada, kamu akan langsung mengenali alat yang tepat saat butuh kartu pembalik atau gambar hero yang miring.

Performa: kenapa transform itu cepat

Satu alasan terakhir untuk menyukai transform: ia ringan untuk dianimasikan browser. Karena transform (dan opacity) bisa ditangani oleh GPU tanpa menghitung ulang tata letak halaman, menganimasikannya jauh lebih mulus dibanding menganimasikan property seperti width, top, atau margin, yang memaksa browser menata ulang semuanya.

Penutup

transform adalah property yang membuatmu bisa menggeser, memutar, mengubah ukuran, dan memiringkan elemen dengan bebas tanpa menyentuh tata letak di sekitarnya. Ini intisari yang perlu kamu bawa:

• transform menerapkan perubahan visual; ia tidak memengaruhi tata letak dokumen, jadi tetangganya tidak bergeser.
• translate(x, y) menggeser elemen; translateX / translateY menargetkan satu sumbu.
• scale(n) mengubah ukurannya; rotate(deg) memutarnya; skew(deg) memiringkannya.
• Rangkai fungsi dalam satu nilai transform (mis. translateX(20px) rotate(10deg)) — urutan berpengaruh, dan deklarasi transform kedua menimpa yang pertama.
• transform-origin memindahkan titik poros untuk rotasi, scale, dan skew.
• translate(-50%, -50%) dengan positioning absolut menengahkan elemen apa pun dengan sempurna.
• Animasikan transform (dan opacity) supaya gerakannya mulus dan bersahabat dengan GPU.

Transform menjelaskan apa yang berubah, tapi kalau berdiri sendiri perubahannya terjadi seketika. Supaya perubahan itu mengalir mulus — terangkatnya kartu saat di-hover, tombol yang membesar dalam sepersekian detik — kamu memadukannya dengan transition dan animasi. Itulah langkah berikutnya yang alami, dan di situlah antarmukamu mulai benar-benar terasa rapi dan matang.