ฟังก์ชัน CSS translateY()

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

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

translateY() ฟังก์ชันใน transform ใช้ในอัตรายอด

ตัวอย่าง

เปลี่ยนที่ตั้งแบบตามทิศทางตั้งแต่ต้นทางต่างกันของ <div> ต่างๆ ในแนวตั้ง

#myDiv1 {
  transform: translateY(30px); /* ย้ายองค์ประกอบตามตัวเลข y 30px */
}
#myDiv2 {
  transform: translateY(50px); /* ย้ายองค์ประกอบตามตัวเลข y 50px */
}
#myDiv3 {
  transform: translateY(-10px); /* ย้ายองค์ประกอบตามตัวเลข y -10px */
}

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

รูปแบบ CSS

translateY(y)
ค่า รายละเอียด
y สำคัญ。กำหนดระยะทางขององค์ประกอบตามตัวเลข y หรือเปอร์เซ็นต์。

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

รุ่น: CSS Transforms Module Level 1

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

ตัวเลขในตารางนี้แสดงรุ่นบราวเซอร์ที่สนับสนุนฟังก์ชันนี้อย่างเต็มที่。

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

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

ความรู้ทางการเรียนCSS 2D โหวตยัน

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

อ้างอิง:CSS translate() ฟังก์ชัน

อ้างอิง:CSS translateX() ฟังก์ชัน

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