Hàm CSS translateY()

Định nghĩa và cách sử dụng

CSS translateY() hàm cho phép bạn định vị lại phần tử theo trục y (hướng thẳng đứng).

translateY() hàm trong transform sử dụng trong thuộc tính.

Mẫu

Định vị lại các phần tử <div> khác nhau theo hướng thẳng đứng:

#myDiv1 {
  transform: translateY(30px); /* Di chuyển phần tử theo trục y 30px */
}
#myDiv2 {
  transform: translateY(50px); /* Di chuyển phần tử theo trục y 50px */
}
#myDiv3 {
  transform: translateY(-10px); /* Di chuyển phần tử theo trục y -10px */
}

Thử ngay

Ngữ pháp CSS

translateY(y)
Giá trị Mô tả
y Phải có. Định nghĩa khoảng cách di chuyển theo trục y của phần tử, có thể là số hoặc phần trăm.

Chi tiết kỹ thuật

Phiên bản: CSS Transforms Module Level 1

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ hàm này.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Các trang liên quan

Hướng dẫn:CSS 2D biện pháp

Tham khảo:Thuộc tính transform trong CSS

Tham khảo:Hàm translate() trong CSS

Tham khảo:Hàm translateX() trong CSS

Tham khảo:Thuộc tính transform trong HTML DOM