CSS - 3D Transform: Memberikan Kedalaman Pada Design Web Anda

Hai, para desainer web masa depan! Hari ini, kita akan melangsungkan perjalanan menarik ke dunia CSS 3D transforms. Sebagai guru komputer tetangga yang ramah, 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 tingkat perlahan. 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 web 2D Anda yang biasa. Sekarang, apa bila Anda dapat lipat lembar kertas itu, putarannya, atau membuatnya berdiri? Itu sebenarnya apa yang bisa kita lakukan dengan elemen web kita menggunakan CSS 3D transforms!

CSS 3D transforms memberikan kita kekuatan untuk memanipulasi elemen dalam ruang tiga dimensi. Kita dapat memutar, mentrans拉斯 (memindahkan), dan menskala elemen sepanjang sumbu X, Y, dan Z. Sumbu Z adalah yang memberikan kedalaman pada design kita, membuat elemen tampak mendekati atau jauh.

Menyiapkan Tempat: Properti Transform

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

.element {
transform: function(value);
}

Dalam sintaks ini, function adalah jenis transformasi yang kita ingin terapkan, dan value adalah seberapa besar kita ingin mentrans拉斯 elemen.

Fungsi Transformasi

Sekarang, mari kita lihat fungsi transformasi 3D utama yang ada di dalam 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)	Menskala elemen di ruang 3D	transform: scale3d(1.5, 1.5, 2);
scaleZ(z)	Menskala 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 sekitar sumbu X	transform: rotateX(45deg);
rotateY(angle)	Memutar elemen sekitar sumbu Y	transform: rotateY(45deg);
rotateZ(angle)	Memutar elemen 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!

Translas 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 menuju penglihat. Itu 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 "dalam".

Putar di 3D

Memutar elemen di 3D bisa menciptakan beberapa efek yang menarik:

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

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

Pentingnya Perspektif

Sekarang, mari kita masukkan hal yang benar-benar menarik. Untuk benar-benar menikmati transformasi 3D, kita perlu menambahkan perspektif. Pandang perspektif adalah jarak antara penglihat 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 ketika 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 berwarna yang berputar saat Anda mengarahkan cursor kepadanya. Sangat keren, kan?

Kesimpulan

Dan begitulah, teman-teman! Kita telah melakukan perjalanan menarik melalui dunia CSS 3D transforms. Dari translas sederhana hingga menciptakan kubus 3D penuh, Anda sekarang memiliki kekuatan untuk menambahkan kedalaman dan dimensi ke design web Anda.

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

Saat kita selesaikan, saya teringat kutipan oleh arsitek ternama Frank Lloyd Wright: "Ruang adalah nafas seni." Dengan CSS 3D transforms, Anda sekarang memiliki alat untuk menghidupkan ruang web Anda. Jadi, maju saja dan ciptakan pengalaman 3D yang menakjubkan!

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

Credits: Image by storyset