Hàm translateX() của CSS

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

CSS translateX() hàm cho phép bạn đặt lại vị trí phần tử theo trục x (hướng ngang).

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

Mô hình

Đặt lại vị trí khác nhau theo hướng ngang của các phần tử <div> khác nhau:

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

Thử ngay

Cú pháp CSS

translateX(x)
Giá trị Mô tả
x Yêu cầu. Định nghĩa khoảng cách di chuyển theo trục x 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ố liệu 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

相关页面

Giáo trình:Chuyển đổi 2D CSS

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

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

Tham khảo:Hàm translateY() CSS

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