TRANSFORMASI 3D CSS

CSS 3D Transformasi memungkinkan pembuatan elemen HTML yang bergerak dan berorientasi dalam ruang tiga dimensi. Dengan kekuatan transformasi 3D, kamu bisa menciptakan efek yang impresif dan meningkatkan estetika sebuah situs web atau aplikasi menggunakan hanya CSS.

Properti Transformasi 3D CSS

Ada beberapa properti CSS yang dapat kamu gunakan untuk mengatur tampilan 3D elemen:

transform

Properti transform digunakan untuk mengatur fungsi transformasi elemen. Contoh penggunaan ini adalah sebagai berikut:

div {
   transform: rotateX(50deg);
}

Dalam contoh di atas, elemen ‘div’ akan berputar sekitar sumbu X sebesar 50 derajat.

transform-origin

Properti transform-origin digunakan untuk mengubah titik asal transformasi. Dalam kata lain, menentukan titik mana transformasi 3D akan berlangsung. Nilai default adalah 50% 50%, yang berarti transformasi akan berlangsung di tengah elemen.

div {
   transform: rotateX(50deg);
   transform-origin: 20% 80%;
}

Dalam contoh di atas, elemen ‘div’ akan berputar di titik yang 20% dari ujung kiri dan 80% dari ujung atas.

perspective

Properti perspective digunakan untuk menentukan jarak perspektif dalam pixel antara elemen Z = 0 dan pengamat/pengguna. Semakin rendah nilainya, maka semakin kuat efek 3D-nya.

div {
   perspective: 100px;
}

Dalam contoh di atas, elemen ‘div’ akan memiliki efek perspektif sejauh 100px.

Kesimpulan

Melalui pemahaman dan pemanfaatan properti transformasi 3D CSS yang baik, kamu bisa menciptakan efek visual yang menarik pada situs web atau aplikasi. Seiring dengan pergerakan teknologi web, kemampuan untuk memanipulasi elemen dalam ruang 3D akan menjadi lebih penting. Jadi, jangan ragu untuk bereksperimen dan mencoba berbagai teknik transformasi. Selamat belajar!