ฟังก์ชัน translateY

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

ไวยากรณ์

selector {
	transform: translateY(shift);
}

ตัวอย่าง

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

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

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

ตัวอย่าง

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

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

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

ดูเพิ่มเติม

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