Hàm translateY

Hàm translateY xác định sự dịch chuyển của phần tử theo trục Y. Được sử dụng cùng với thuộc tính transform. Giá trị của thuộc tính là bất kỳ đơn vị kích thước nào. Giá trị dương dịch chuyển xuống dưới, giá trị âm - lên trên.

Cú pháp

cssbộ chọn {
  transform: translateY(độ-dịch-chuyển);
}

Ví dụ

Nếu di chuột qua khối - nó sẽ dịch chuyển xuống dưới 30px:

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

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

Результат:

Ví dụ

Nếu di chuột qua khối - nó sẽ dịch chuyển lên trên 30px:

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

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

Результат:

Xem thêm