Hàm translateX

Hàm translateX thiết lập sự dịch chuyển của phần tử theo trục X. Đượ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 sang phải, giá trị âm - sang trái.

Cú pháp

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

Ví dụ

Nếu di chuột vào khối - nó sẽ dịch chuyển sang phải 30px:

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

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

Результат:

Ví dụ

Nếu di chuột vào khối - nó sẽ dịch chuyển sang trái 30px:

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

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

Результат:

Xem thêm