CSS - Properti Terjemahan: Menggerakkan Elemen dengan gaya

Hai teman-teman, para ahli CSS masa depan! Hari ini, kita akan mengemban sebuah perjalanan menarik ke dunia CSS transforms, khususnya fokus pada properti translate. Sebagai guru komputer tetangga yang ramah, saya di sini untuk mengarahkan Anda melalui realm magis ini di mana kita dapat menggerakkan elemen di halaman web kita tanpa merusak susunan elemen lain. Jadi, pasang sabuk keselamatan Anda dan mari kita masuk ke dalam!

Apa Itu Properti CSS Translate?

Sebelum kita mulai menggerakkan hal-hal, mari kita memahami apa yang sebenarnya dilakukan oleh properti translate. Dalam kata-kata sederhana, properti ini memungkinkan kita menggerakkan elemen dari posisinya saat ini tanpa mengganggu susunan elemen lain. Itu seperti memiliki tongkat ajaib yang dapat mengangkat dan memindahkan elemen di halaman web Anda!

Anologi Dunia Nyata

Bayangkan Anda menata furnitur di dalam sebuah ruangan. Properti translate adalah seperti mengambil kursi dan memindahkannya ke tempat lain tanpa mengganggu apa pun. Keren, kan?

Nilai Yang Mungkin

Properti translate dapat menerima berbagai jenis nilai. Mari kitauraikan mereka:

Tipe Nilai	Deskripsi	Contoh
Panjang	Unit spesifik seperti px, em, rem	translate(50px, 20px)
Persentase	Relatif terhadap ukuran elemen	translate(50%, 20%)
Kata kunci	Nilai spesial seperti none	translate(none)

Terapkan Pada

Properti translate dapat diterapkan pada setiap elemen yang dapat diubah. Ini termasuk kebanyakan elemen HTML, tapi sangat berguna untuk:

• <div> kontainer
• Gambar (<img>)
• Tombol (<button>)
• Elemen teks (<p>, <span>, dll.)

Sintaks DOM

Ketika bekerja dengan JavaScript, Anda mungkin perlu mengakses atau mengubah properti translate. Ini adalah cara Anda dapat melakukannya:

// Mendapatkan nilai translate
let currentTranslate = element.style.translate;

// Mengatur nilai translate
element.style.translate = "50px 20px";

Sekarang, mari kita masuk ke beberapa contoh praktis!

CSS Translate - Tidak Ada Translasi Ditetapkan

kadang-kadang, Anda mungkin ingin secara eksplisit menyatakan bahwa elemen tidak harus diterjemahkan. Berikut adalah cara Anda melakukannya:

.no-move {
translate: none;
}

Ini seperti mengatakan kepada elemen Anda, "Tetap di tempatmu, teman! Jangan bergerak."

CSS Translate - Menggunakan Panjang-Persentase untuk Translasi pada Sumbu X

Mari kita mulai dengan pergerakan sederhana horizontal:

.move-right {
translate: 100px;
}

Ini akan menggerakkan elemen kita 100 pixel ke kanan. Itu seperti memberikan elemen Anda sedikit dorongan dan mengatakan, "Scoot over a bit, will ya?"

CSS Translate - Menggunakan Panjang-Persentase untuk Translasi pada Sumbu Y

Sekarang, mari kita gerakkan hal-hal ke atas dan ke bawah:

.move-down {
translate: 0 50px;
}

Ini akan menggerakkan elemen kita 50 pixel ke bawah. Nilai pertama (0) berarti tidak ada pergerakan horizontal, dan nilai kedua (50px) berarti 50 pixel ke bawah.

CSS Translate - Menggunakan Panjang-Persentase untuk Translasi pada Sumbu Z

Hal-hal menjadi sangat menarik saat kita mulai bergerak di 3D! Berikut adalah cara Anda dapat menggerakkan elemen "menuju" atau "keluar" dari penglihatan:

.move-closer {
translate: 0 0 -50px;
}

Ini akan menggerakkan elemen 50 pixel mendekati penglihatan. Itu seperti elemen itu muncul dari layar!

CSS Translate - Menggunakan Panjang-Persentase untuk Translasi pada Sumbu X dan Y

Mari kita gabungkan pergerakan horizontal dan vertikal:

.move-diagonally {
translate: 100px 100px;
}

Ini akan menggerakkan elemen kita 100 pixel ke kanan dan 100 pixel ke bawah. Itu seperti mengatakan kepada elemen Anda, "Pergi ke sudutnya!"

CSS Translate - Menggunakan Panjang-Persentase untuk Translasi pada Sumbu Y dan Z

Menggerakkan vertikal dan ke dalam:

.float-down {
translate: 0 50px 20px;
}

Ini akan menggerakkan elemen 50 pixel ke bawah dan 20 pixel keluar dari penglihatan. Itu menciptakan efek 3D yang halus!

CSS Translate - Menggunakan Panjang-Persentase untuk Translasi pada Sumbu X dan Z

Mari kita gabungkan pergerakan horizontal dan kedalaman:

.slide-away {
translate: 100px 0 50px;
}

Ini akan menggerakkan elemen 100 pixel ke kanan dan 50 pixel keluar dari penglihatan. Itu seperti elemen itu meluncur ke samping dan ke jauh.

CSS Translate - Menggunakan Panjang-Persentase untuk Translasi pada Sumbu X, Y dan Z

Akhirnya, mari kita gerakkan di semua tiga dimensi:

.move-everywhere {
translate: 100px 50px 25px;
}

Ini akan menggerakkan elemen kita 100 pixel ke kanan, 50 pixel ke bawah, dan 25 pixel keluar dari penglihatan. Itu seperti memberikan elemen Anda kebebasan sepenuhnya untuk bergerak di ruang 3D!

Kesimpulan

Dan begitu juga, teman-teman! Kita telah mengemban perjalanan menarik ke dunia CSS translations. Ingat, dengan kekuatan yang besar datang tanggung jawab yang besar. Gunakan translations ini bijaksana untuk menciptakan halaman web yang menarik dan dinamis.

Sebelum saya membiarkan Anda pergi, ini adalah一个小贴士 dari guru komputer tetangga Anda: Selalu tes translations Anda di berbagai perangkat dan browser. Yang terlihat sempurna di komputer Anda mungkin terlihat agak berbeda di ponsel seseorang lain.

Sekarang pergi dan terjemahkan elemen web Anda ke tinggi (dan lebar, dan kedalaman)! Happy coding!

Credits: Image by storyset