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
bộ 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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateX(-30px);
}
:
Xem thêm
-
hàm
translate,
thiết lập dịch chuyển theo cả hai trục X và Y -
hàm
translateY,
thiết lập dịch chuyển theo trục Y
