Transformasi 2D CSS

CSS (Cascading Style Sheets) memungkinkan kamu untuk melakukan transformasi 2D, mengubah bentuk dan posisi elemen HTML di halaman web. Dalam panduan ini, kita akan membahas reka ulang elemen dengan transformasi 2D CSS seperti pengubahan bentuk (scaling), pemindahan (translate), dan rotasi.

Transformasi 2D adalah metode untuk mengubah bentuk dan posisi elemen web. Fungsi transformasi meliputi mengubah skala, memindahkan atau menggerakkan elemen, merotasi elemen, atau mencengkeram elemen.

Skala

Untuk mengubah ukuran elemen HTML, kamu bisa menggunakan fungsi scale(). Fungsi ini menerima satu atau dua nilai. Nilai pertama untuk skala x (lebar) dan nilai kedua untuk skala y (tinggi).

transform: scale(2, 1.5);

Translate

Fungsi translate() digunakan untuk memindahkan posisi elemen. Nilai yang dimasukkan adalah untuk x (arah horizontal) dan y (arah vertical).

transform: translate(50px, 20px);

Rotate

Untuk merotasi elemen, kamu bisa menggunakan fungsi rotate(). Nilai yang dimasukan adalah derajat rotasi dalam bentuk satuan degree (deg) atau radian (rad).

transform: rotate(45deg);

Skew

Fungsi skew() memiringkan elemen sepanjang sumbu x atau y atau keduanya. Nilai yang dimasukkan adalah derajat kemiringan.

transform: skew(30deg, 20deg);

Penggunaan Transform pada CSS Transitions

CSS Transform juga dapat digunakan bersamaan dengan CSS Transitions untuk membuat animasi halus pada elemen. Transitions memungkinkan perubahan properti CSS berlangsung selama periode waktu tertentu.

.box {
  transition: transform 2s;
}

.box:hover {
  transform: rotate(180deg);
}

Dalam contoh di atas, ketika kursor mouse ada di atas elemen .box, elemen tersebut akan berotasi 180 derajat selama 2 detik.

Ingatlah bahwa transformasi 2D CSS merupakan cara efisien untuk memberikan perubahan visual pada elemen web tanpa mempengaruhi layout halaman lainnya. Jadi jangan segan untuk bereksperimen!