การแปลงองค์ประกอบด้วยแกน X, Y และ Z ใน CSS3

การใช้เมธอด translate3d()

ใช้เมธอด translate3d(x, y, z) เพื่อย้ายตำแหน่งองค์ประกอบในพื้นที่ 3 มิติ โดยระบุระยะทางตามแกน X, Y และ Z

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

translate3d(tx, ty, tz)

tx: ความยาว () แทนค่าสัมพัทธ์แกน X ของเวกเตอร์การย้าย
ty: ความยาว () แทนค่าสัมพัทธ์แกน Y ของเวกเตอร์การย้าย
tz: ความยาว () แทนค่าสัมพัทธ์แกน Z ของเวกเตอร์การย้าย

ตัวอย่าง

div {
  width: 50px;
  height: 50px;
  background-color: orange;
}
.trans {
  transform: perspective(300px) translate3d(15px, 0, 0px);
  background-color: black;
}