ฟังก์ชัน translate() ของ CSS

การระบุและการใช้งาน

CSS translate() ฟังก์ชันที่อนุญาตให้คุณเปลี่ยนตำแหน่งองค์ประกอบ

translate() ฟังก์ชันใน transform ใช้ในนามสกุล

ตัวอย่าง

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

#myDiv1 {
  transform: translate(50px); /* ย้ายองค์ประกอบตามนาทีที่ x 50px และตามนาทีที่ y 0px */
}
#myDiv2 {
  transform: translate(50px, 20px); /* ย้ายองค์ประกอบตามนาทีที่ x 50px และตามนาทีที่ y 20px */
}
#myDiv3 {
  transform: translate(100px, 30px); /* ย้ายองค์ประกอบตามนาทีที่ x 100px และตามนาทีที่ y 30px */
}

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

สyntax CSS

translate(x, y)
ค่า รายละเอียด
x สำคัญ
y

ตัวเลือก

ถ้าละเลย ค่าจะถูกตั้งเป็น 0

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

รุ่น: CSS Transforms Module Level 1

การสนับสนุนเบราเซอร์

ตัวเลขในตารางนี้แสดงรุ่นการแพ้ยนะของเบราเซอร์ที่สนับสนุนฟังก์ชันนี้ครบถ้วน

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

หน้าที่เกี่ยวข้อง

คู่มือฝึกฝน:CSS 2D โหวตทันที

อ้างอิง:CSS transform คุณสมบัติ

อ้างอิง:CSS translateX() 函数

อ้างอิง:CSS translateY() 函数

อ้างอิง:CSS HTML DOM transform คุณสมบัติ