Biến đổi phần tử theo trục Y với CSS3

Phương thức translateY()

Sử dụng translateY(y) để dịch chuyển phần tử dọc theo trục tung (trục Y) trong mặt phẳng 2D.

Cú pháp

translateY(y)

Tham số

• y: Giá trị <length> đại diện cho khoảng cách dịch chuyển theo trục Y. Giá trị dương dịch xuống, giá trị âm dịch lên.

Ví dụ minh họa

div {
  width: 40px;
  height: 40px;
  background-color: black;
}

.trans {
  transform: translateY(20px);
  background-color: orange;
}

Phần tử có lớp .trans sẽ được dịch chuyển xuống 20px so với vị trí gốc.