ฟังก์ชัน translateY

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

ไวยากรณ์

cssselector {
  transform: translateY(shift);
}

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ดูเพิ่มเติม