ฟังก์ชัน translateX

ฟังก์ชัน translateX กำหนดการเลื่อนองค์ประกอบ ตามแกน X ใช้ร่วมกับคุณสมบัติ transform ค่าของคุณสมบัติสามารถเป็น หน่วยวัดขนาด ใดก็ได้ ค่าบวกจะเลื่อน ไปทางขวา ค่าลบจะเลื่อนไปทางซ้าย

ไวยากรณ์

cssselector {
  transform: translateX(offset);
}

ตัวอย่าง

หากเลื่อนเมาส์ไปบนบล็อก - มันจะเลื่อน ไปทางขวา 30px:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(30px);
}

Результат:

ตัวอย่าง

หากเลื่อนเมาส์ไปบนบล็อก - มันจะเลื่อน ไปทางซ้าย 30px:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(-30px);
}

Результат:

ดูเพิ่มเติม