ย้ายองค์ประกอบตามแกน X และ Y ด้วย CSS translate()

ใช้เมธอด translate(x, y) เพื่อย้ายองค์ประกอบตามแกน X และ Y พร้อมกัน

รูปแบบไวยากรณ์:

translate(x, y)

ที่นี่ x เป็นความยาวแทนพิกัด X ของเวกเตอร์การย้าย

y เป็นความยาวแทนพิกัด Y ของเวกเตอร์การย้าย

ตัวอย่าง:

div {
  width: 50px;
  height: 50px;
  background-color: orange;
}
.trans {
  transform: translate(20px, 20px);
  background-color: black;
}