ฟังก์ชัน translate

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

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

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

ไวยากรณ์

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

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ดูเพิ่มเติม