ฟังก์ชัน translateX

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

ไวยากรณ์

selector {
	transform: translateX(offset);
}

ตัวอย่าง

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

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

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

ตัวอย่าง

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

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

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

ดูเพิ่มเติม

ฟังก์ชัน translate,
ซึ่งกำหนดการเลื่อนตามแกน X และ Y
ฟังก์ชัน translateY,
ซึ่งกำหนดการเลื่อนตามแกน Y