CSS - 3D Transformasi: Menambah Kedalaman ke dalam Rancangan Web Anda

Hai, para desainer web masa depan! Hari ini, kita akan mengemban perjalanan yang menarik ke dalam dunia CSS 3D transformasi. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk mengantar Anda melalui topik yang menarik ini. Jangan khawatir jika Anda baru saja memulai programming – kita akan mulai dari dasar dan naik turun secara bertahap. Pada akhir pelajaran ini, Anda akan menciptakan karya 3D yang akan membuat website Anda tampak menonjol!

Apa Itu CSS 3D Transforms?

Bayangkan Anda memegang sebuah lembar kertas. Dalam dunia desain web, itu adalah halaman 2D biasa Anda. Sekarang, bagaimana jika Anda dapat lipat lembar kertas itu, putarannya, atau membuatnya berdiri? Itu sebenarnya apa yang dilakukan CSS 3D transforms terhadap elemen web kita!

CSS 3D transforms memberikan kita kekuatan untuk memanipulasi elemen dalam ruang tiga dimensi. Kita dapat memutar, mentranslasi (memindahkan), dan menskalakan elemen di sepanjang sumbu X, Y, dan Z. Sumbu Z adalah yang menambah kedalaman ke dalam rancangan kita, membuat elemen tampak mendekati atau jauh.

Menyiapkan Tempat: Properti Transform

Sebelum kita masuk ke dunia 3D, mari kita singkatkan properti transform. Ini adalah tongkat ajaib yang kita gunakan untuk mengapply transformasi 3D kita.

.element {
transform: function(value);
}

Dalam sintaks ini, function adalah jenis transformasi yang kita ingin apply, dan value adalah seberapa besar kita ingin transformasi elemen itu.

Fungsi Transformasi

Sekarang, mari kita lihat fungsi transformasi 3D utama yang ada di tangan kita:

Fungsi	Deskripsi	Contoh
translate3d(x,y,z)	Memindahkan elemen di ruang 3D	transform: translate3d(10px, 20px, 30px);
translateZ(z)	Memindahkan elemen sepanjang sumbu Z	transform: translateZ(30px);
scale3d(x,y,z)	Mengskalakan elemen di ruang 3D	transform: scale3d(1.5, 1.5, 2);
scaleZ(z)	Mengskalakan elemen sepanjang sumbu Z	transform: scaleZ(2);
rotate3d(x,y,z,angle)	Memutar elemen di ruang 3D	transform: rotate3d(1, 1, 1, 45deg);
rotateX(angle)	Memutar elemen di sekitar sumbu X	transform: rotateX(45deg);
rotateY(angle)	Memutar elemen di sekitar sumbu Y	transform: rotateY(45deg);
rotateZ(angle)	Memutar elemen di sekitar sumbu Z	transform: rotateZ(45deg);
perspective(n)	Mengatur pandangan perspektif	transform: perspective(1000px);

Jangan khawatir jika ini terlihat menakutkan – kita akan membongkar setiap satu dengan contoh!

Mari Transformasi!

Translasi di 3D

Mari kita mulai dengan memindahkan elemen di ruang 3D menggunakan translate3d:

.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate3d(50px, 30px, 20px);
}

Dalam contoh ini, kotak kita bergerak 50px ke kanan, 30px ke bawah, dan 20px mendekati pemirsa. Seperti kotak itu terapung di luar layar!

Skala di 3D

Sekarang, mari kita membuat kotak kita tumbuh atau menyusut di 3D:

.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale3d(1.5, 1.5, 2);
}

Transformasi ini membuat kotak kita 1.5 kali lebih besar dalam lebar dan tinggi, dan dua kali "kedalaman".

Rotasi di 3D

Memutar elemen di 3D dapat menciptakan beberapa efek yang sangat menarik:

.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotateX(45deg) rotateY(30deg) rotateZ(60deg);
}

Kotak ini melakukan tari kecil, memutar 45 derajat di sekitar sumbu X, 30 derajat di sekitar sumbu Y, dan 60 derajat di sekitar sumbu Z!

Pentingnya Perspektif

Sekarang, mari kita perhatikan hal yang benar-benar menarik. Untuk benar-benar menghargai transformasi 3D, kita perlu menambahkan perspektif. Pandanglah perspektif sebagai jarak antara pemirsa dan objek.

.container {
perspective: 1000px;
}

.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotateY(45deg);
}

Dalam contoh ini, kita menambahkan perspektif ke wadah. Sekarang saat kita memutar kotak, itu tampak lebih tiga dimensi!

Menggabungkan Semua: Kubus 3D

Mari kita gabungkan semua yang kita pelajari untuk menciptakan kubus 3D:

<div class="scene">
<div class="cube">
<div class="face front">Depan</div>
<div class="face back">Belakang</div>
<div class="face right">Kanan</div>
<div class="face left">Kiri</div>
<div class="face top">Atas</div>
<div class="face bottom">Bawah</div>
</div>
</div>

.scene {
width: 200px;
height: 200px;
perspective: 600px;
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}

.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
line-height: 200px;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}

.front  { background: rgba(255,0,0,0.7);   transform: rotateY(  0deg) translateZ(100px); }
.right  { background: rgba(0,255,0,0.7);   transform: rotateY( 90deg) translateZ(100px); }
.back   { background: rgba(0,0,255,0.7);   transform: rotateY(180deg) translateZ(100px); }
.left   { background: rgba(255,255,0,0.7); transform: rotateY(-90deg) translateZ(100px); }
.top    { background: rgba(255,0,255,0.7); transform: rotateX( 90deg) translateZ(100px); }
.bottom { background: rgba(0,255,255,0.7); transform: rotateX(-90deg) translateZ(100px); }

.cube:hover {
transform: translateZ(-100px) rotateX(-90deg) rotateY(-45deg);
}

Kode ini menciptakan kubus 3D berwarna yang berputar saat Anda mengarahkan cursor kepadanya. Sangat menarik, kan?

Kesimpulan

Dan begitulah, teman-teman! Kita telah melakukan perjalanan yang menarik melalui dunia CSS 3D transforms. Dari translasi sederhana ke penciptaan kubus 3D lengkap, Anda sekarang memiliki kekuatan untuk menambah kedalaman dan dimensi ke dalam rancangan web Anda.

Ingat, kunci untuk menjadi ahli transformasi 3D adalah latihan. Jangan takut untuk mencoba nilai dan kombinasi yang berbeda. Siapa tahu? Anda mungkin menciptakan hal berikutnya yang besar di dunia desain web!

Saat kita mengakhiri, saya teringat ungkapan oleh arsitek terkenal Frank Lloyd Wright: "Ruang adalah napas seni." Dengan CSS 3D transforms, Anda sekarang memiliki alat untuk menghidupkan ruang web Anda. Jadi, maju dan buat pengalaman 3D yang menakjubkan!

Happy coding, dan semoga rancangan web Anda selalu memiliki kedalaman!

Credits: Image by storyset