Hàm translateY
Hàm translateY xác định sự dịch chuyển của phần tử
theo trục Y. Đượ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
xuống dưới, giá trị âm - lên trên.
Cú pháp
bộ chọn {
transform: translateY(độ-dịch-chuyển);
}
Ví dụ
Nếu di chuột qua khối - nó sẽ dịch chuyển
xuống dưới 30px:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(30px);
}
:
Ví dụ
Nếu di chuột qua khối - nó sẽ dịch chuyển
lên trên 30px:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(-30px);
}
:
Xem thêm
-
hàm
translate,
xác định dịch chuyển theo cả hai trục X và Y -
hàm
translateX,
xác định dịch chuyển theo trục X
