ฟังก์ชัน translate

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

สามารถรับพารามิเตอร์ได้หนึ่งหรือสองตัว หากมี พารามิเตอร์สองตัว - พารามิเตอร์แรกจะกำหนดการเลื่อน ตามแกน X และตัวที่สอง - ตามแกน Y หากมีพารามิเตอร์ เพียงตัวเดียว มันจะกำหนดการเลื่อนตามแกน X

ค่าของพารามิเตอร์สามารถเป็นค่าบวก หรือค่าลบได้ ค่าบวก ตามแกน X จะเลื่อนไปทางขวา ค่าลบ - ไปทางซ้าย ค่าบวกตามแกน Y จะเลื่อน ลงด้านล่าง ค่าลบ - ขึ้นด้านบน

ไวยากรณ์

selector {
	transform: translate(การเลื่อนตามแกน X, การเลื่อนตามแกน Y);
}

ตัวอย่าง

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

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

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

ตัวอย่าง

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

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

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

ตัวอย่าง

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

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

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

ดูเพิ่มเติม

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