CSS translate คุณสมบัติ

การกำหนดและการใช้งาน

translate คุณสมบัตินี้อนุญาตให้คุณเปลี่ยนตำแหน่งขององค์ประกอบ.

translate คุณสมบัตินี้กำหนดตำแหน่งขององค์ประกอบในสเปลส์สองมิติ. คุณยังสามารถกำหนดตำแหน่งตัว z มิติเพื่อเปลี่ยนตำแหน่งในสเปลส์สามมิติ.

ตัวเลขพิกัดสามมิติสามารถมีเพียงตัวเลขพิกัด x มิติเดียว หรือตัวเลขพิกัด x และ y มิติ หรือตัวเลขพิกัด x, y และ z มิติ.

เพื่อที่จะเข้าใจความหมายของคุณสมบัตินี้ translate คุณสมบัติการแสดง.

ความช่วยเหลือ:เพื่อที่คุณสมบัติตัว z-axis จะทำงานได้ คุณจะต้องกำหนดค่าให้กับคุณสมบัติ CSS perspective.

แนะนำ:วิธีอื่นที่สามารถย้ายองค์ประกอบได้คือการใช้ CSS translate() ฟังก์ชัน คุณสมบัติ CSS transform ของเราในหน้านี้ สามารถกล่าวว่าเป็นวิธีที่ง่ายและตรงไปตรงมาที่สุดในการย้ายองค์ประกอบ.

ตัวอย่าง

ตัวอย่าง 1

เปลี่ยนตำแหน่งขององค์ประกอบ:

div {
  translate: 100px 20px;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

เมื่อเราตั้งค่าตัว z-axis translate ต้องมีคุณสมบัตินี้ในองค์ประกอบพ่อของเราเมื่อเราใช้คุณสมบัติ perspective เพื่อที่เราจะเห็นผลลัพธ์ของคุณสมบัตินี้ จะต้องมีคุณสมบัตินี้ในองค์ประกอบพ่อของเรา:

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

ทดลองด้วยตัวเอง

ระบบการใช้งาน CSS

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

ค่าของคุณสมบัติ

ค่า รายละเอียด
x-axis

กำหนดตำแหน่งบนตัว x-axis. ค่าที่เป็นไปได้:

  • ความยาว
  • เปอร์เซนต์
y-axis

กำหนดตำแหน่งบนตัว y-axis. ค่าที่เป็นไปได้:

  • ความยาว
  • เปอร์เซนต์
z-axis

กำหนดตำแหน่งบนตัว z-axis. ค่าที่เป็นไปได้:

  • ความยาว
  • เปอร์เซนต์
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น. ดู: initial.
inherit ขอบคุณสำหรับการสืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของเรา. ดู: inherit.

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: none
เชื่อมโยง ไม่
การสร้างอนุรักษ์: สนับสนุน. ดู:คุณสมบัติที่เกี่ยวข้องกับอนุรักษ์.
รุ่น: CSS3
ระบบการใช้งาน JavaScript: object.style.translate="10px 20px"

การสนับสนุนเบราญี่ร

ตัวเลขในตารางนี้แสดงรุ่นเบราญี่รที่สนับสนุนคุณสมบัตินี้เต็มที่。

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

เพจที่เกี่ยวข้อง

CSS ความรู้CSS 2D การเปลี่ยนแปลง

CSS ความรู้CSS 3D การเปลี่ยนแปลง

CSS คู่มือCSS scale ทางแบบ

CSS คู่มือCSS rotate ทางแบบ

CSS คู่มือCSS perspective ทางแบบ