Sifat translate CSS

halaman sebelumnya transition-timing-function
Halaman berikutnya unicode-bidi

Definisi dan penggunaan

translate Sifat memungkinkan anda untuk mengubah kedudukan elemen.

translate Sifat mendefinikan koordinat sumbu x dan y elemen dalam ruang dua dimensi. Anda juga boleh mendefinikan koordinat sumbu z untuk mengubah kedudukan dalam ruang tiga dimensi.

Koordinat boleh hanya memberikan koordinat sumbu x, koordinat sumbu x dan y, atau koordinat sumbu x, y dan z.

Untuk memahami lebih baik translate Sifat, sila lihatPertunjukan。

Panduan:Untuk membolehkan sumbu z berfungsi, anda perlu menetapkan nilai bagi sifat CSS perspective.

Perhatian:Teknik lain untuk merangkai elemen adalah menggunakan dengan Fungsi translate() CSS Sifat CSS transform di halaman ini boleh dikatakan adalah cara yang lebih mudah dan lebih langsung untuk merangkai elemen.

Contoh

Contoh 1

Ubah kedudukan elemen:

div {
  translate: 100px 20px;
}

Cuba sendiri

Contoh 2

Ketika menetapkan sumbu z translate Sifat, mesti diatur di elemen bapa pula perspective Sifat, kami harus melihat kesan:

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

Cuba sendiri

Sintaksis CSS

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

Nilai sifat

Nilai	Penerangan
x-axis	Mendefinikan kedudukan di sumbu x. Nombor yang mungkin: Panjang Peratusan
y-axis	Mendefinikan kedudukan di sumbu y. Nombor yang mungkin: Panjang Peratusan
z-axis	Mendefinikan kedudukan di sumbu z. Nombor yang mungkin: Panjang Peratusan
initial	Tetapkan sifat ini ke nilai lalainya. Lihat: initial。
inherit	Mewarisi sifat ini dari elemen bapanya. Lihat: inherit。

Perincian teknikal

Nilai lalai:	none
Warisan:	Tidak
Pembuatan animasi：	Disebalikinya: Lihat:Sifat berkaitan animasi。
Versi：	CSS3
Rujukan sintaksis JavaScript：	object.style.translate="10px 20px"