Hàm translate

Hàm translate thiết lập dịch chuyển phần tử dọc theo trục X và trục Y. Được sử dụng kết hợp 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.

Có thể nhận một hoặc hai tham số. Nếu có hai tham số - tham số đầu tiên thiết lập dịch chuyển dọc theo trục X, và tham số thứ hai - dọc theo trục Y. Nếu chỉ có một tham số, thì nó thiết lập dịch chuyển dọc theo trục X.

Giá trị của các tham số có thể dương hoặc âm. Giá trị dương dọc theo trục X dịch chuyển sang phải, giá trị âm - sang trái. Giá trị dương dọc theo trục Y dịch chuyển xuống dưới, giá trị âm - lên trên.

Cú pháp

bộ chọn {
	transform: translate(dịch chuyển theo trục X, dịch chuyển theo trục Y);
}

Ví dụ

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

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

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

Ví dụ

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

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

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

Ví dụ

Nếu di chuột vào phần tử - nó sẽ dịch chuyển sang phải 15px và xuống dưới 30px:

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

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

Xem thêm

hàm translateX,
thiết lập dịch chuyển theo trục X
hàm translateY,
thiết lập dịch chuyển theo trục Y