Properti translate CSS

halaman sebelumnya transition-timing-function
Hal Berikutnya unicode-bidi

Definisi dan penggunaan

translate Atribut memungkinkan Anda mengubah posisi elemen.

translate Atribut mendefinisikan koordinat sumbu x dan y elemen di ruang dua dimensi. Anda juga dapat mendefinisikan koordinat sumbu z untuk mengubah posisi di ruang tiga dimensi.

Koordinat dapat diberikan hanya koordinat sumbu x, koordinat sumbu x dan y, atau koordinat sumbu x, y, dan z.

Untuk memahami lebih baik translate Atribut, lihatPertunjukan.

Petunjuk:Untuk membuat atribut sumbu z berfungsi, Anda perlu menentukan nilai atribut CSS perspective.

Perhatian:Teknik lain untuk memindahkan elemen adalah menggunakan Fungsi translate() CSS Atribut CSS transform di halaman ini dapat disebut metode yang lebih sederhana dan lebih langsung untuk menjadikan elemen bergerak.

Contoh

Contoh 1

Mengubah posisi elemen:

div {
  translate: 100px 20px;
}

Coba sendiri

Contoh 2

Ketika mengatur sumbu z translate Atribut harus disetel di elemen orang tua ketika mengatur atribut perspective Kita harus melihat atribut, agar kita dapat melihat efeknya:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

Coba sendiri

Syntaks CSS

translate: x-axis y-axis z-axis|initial|inherit;

Nilai atribut

Nilai	Deskripsi
x-axis	Mendefinisikan posisi di sumbu x. Nilai yang mungkin: Panjang Persentase
y-axis	Mendefinisikan posisi di sumbu y. Nilai yang mungkin: Panjang Persentase
z-axis	Mendefinisikan posisi di sumbu z. Nilai yang mungkin: Panjang Persentase
initial	Atur atribut ini ke nilai standarnya. Lihat initial.
inherit	Mengambil atribut ini dari elemen orang tua. Lihat inherit.