Hàm translate() của CSS

Trang trước Hàm tan() CSS
Trang tiếp theo Hàm translateX() CSS
Quay lại lớp trên Sách tham khảo hàm CSS

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

CSS translate() hàm cho phép bạn thay đổi vị trí của yếu tố.

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

Mẫu

Thay đổi vị trí của yếu tố:

#myDiv1 {
  transform: translate(50px); /* Di chuyển yếu tố theo trục x 50px, theo trục y 0px */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Di chuyển yếu tố theo trục x 50px, theo trục y 20px */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Di chuyển yếu tố theo trục x 100px, theo trục y 30px */
}

Thử ngay

Cú pháp CSS

translate(x, y)

Giá trị	Mô tả
x	Bắt buộc. Định nghĩa khoảng cách di chuyển theo trục x của yếu tố, có thể là số hoặc phần trăm.
y	Tùy chọn. Định nghĩa khoảng cách di chuyển theo trục y của yếu tố, có thể là số hoặc phần trăm. Nếu bỏ qua, giá trị sẽ được đặt là 0.

Giá trị

Mô tả

Bắt buộc. Định nghĩa khoảng cách di chuyển theo trục x của yếu tố, có thể là số hoặc phần trăm.

Tùy chọn. Định nghĩa khoảng cách di chuyển theo trục y của yếu tố, có thể là số hoặc phần trăm.

Nếu bỏ qua, giá trị sẽ được đặt là 0.