ฟังก์ชัน CSS translate() สำหรับเลื่อนตำแหน่ง

ฟังก์ชัน translate() ใน CSS ใช้สำหรับเลื่อนตำแหน่งองค์ประกอบในทิศทางแนวนอนและแนวตั้ง

ตัวอย่างที่ 1: translateX เท่านั้น (50px, 0)

<!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} .translate_img {    transform: translate(50px, 0); } </style> </head> <body> <h1>Learn</h1> <p id="demo1">Excel vlookup</p> <p id="demo2">Excel filters</p> <h4>Learn Excel</h4> <img class="translate_img" src="https://www.tutorialspoint.com/videotutorials/assets/videos/courses/42/images/course_42_image.png" alt="MS Excel"> </body> </html>

ผลลัพธ์

ตัวอย่างที่ 2: translate(100px, 50%)

<!DOCTYPE html> <html> <head> <style> .translate_img {    transform: translate(100px, 50%); } </style> </head> <body> <h1>Learn</h1> <img class="translate_img" src="https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png" alt="MongoDB"> </body> </html>

ผลลัพธ์

ไวยากรณ์ (Syntax)

transform: translate(tx, ty);
transform: translateX(tx);
transform: translateY(ty);
transform: translate3d(tx, ty, tz); /* 3D */

คำอธิบาย

• tx - ระยะเลื่อนแกน X (บวก = ขวา, ลบ = ซ้าย)
• ty - ระยะเลื่อนแกน Y (บวก = ล่าง, ลบ = บน) - ไม่บังคับ ค่าเริ่มต้น 0
• ใช้หน่วยได้ทั้งหมด: px, %, em, rem, vw, vh, cm, mm, in, pt, pc
• % อ้างอิงจากขนาดขององค์ประกอบตัวเอง (width/height)

ข้อดีของ transform:translate vs position:relative + top/left

แนะนำ: ใช้ transform: translate() สำหรับ animation และการเลื่อนเล็กน้อย ใช้ position สำหรับ layout จริง