Biến đổi phần tử theo trục x, y, z với CSS3

Phương thức translate3d() trong CSS3

Sử dụng phương thức translate3d(x, y, z) để dịch chuyển phần tử trong không gian 3D theo ba trục tọa độ.

Cú pháp

translate3d(tx, ty, tz)

Tham số

• tx: Giá trị <length> đại diện cho hoành độ của vectơ dịch chuyển (trục X).
• ty: Giá trị <length> đại diện cho tung độ của vectơ dịch chuyển (trục Y).
• tz: Giá trị <length> đại diện cho thành phần Z của vectơ dịch chuyển (trục Z).

Ví dụ minh họa

div {
  width: 50px;
  height: 50px;
  background-color: orange;
}

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

Trong ví dụ này, lớp .trans áp dụng phối cảnh (perspective) 300px và dịch chuyển phần tử 15px theo trục X, giữ nguyên vị trí trên trục Y và Z.

translate3d(tx, ty, tz)

div {
  width: 50px;
  height: 50px;
  background-color: orange;
}

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