translateY()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Hàm translateY() CSS function định vị lại một phần tử theo chiều dọc trên mặt phẳng 2D.
Kết quả của nó là kiểu dữ liệu <transform-function>.
Try it
transform: translateY(0);
transform: translateY(42px);
transform: translateY(-2.1rem);
transform: translateY(3ch);
<section id="default-example">
<img
class="transition-all"
id="static-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
#static-element {
opacity: 0.4;
position: absolute;
}
#example-element {
position: absolute;
}
Note:
translateY(ty) tương đương với
translate(0, ty) hoặc
translate3d(0, ty, 0).
Cú pháp
/* <length-percentage> values */
transform: translateY(200px);
transform: translateY(50%);
Giá trị
<length-percentage>-
Giá trị là một
<length>hoặc<percentage>biểu thị tung độ (dọc, tọa độ y) của vector dịch chuyển [0, ty]. Trong hệ tọa độ Descartes, nó biểu thị độ dịch chuyển dọc theo trục y. Giá trị phần trăm tham chiếu đến chiều cao của hộp tham chiếu được xác định bởi thuộc tínhtransform-box.
| Tọa độ Descartes trên ℝ^2 | Tọa độ thuần nhất trên ℝℙ^2 | Tọa độ Descartes trên ℝ^3 | Tọa độ thuần nhất trên ℝℙ^3 |
|---|---|---|---|
|
Phép dịch chuyển không phải là phép biến đổi tuyến tính trong ℝ^2 và không thể biểu diễn bằng ma trận tọa độ Descartes. |
|
|
|
[1 0 0 1 0 t] |
Cú pháp chính thức
<translateY()> =
translateY( <length-percentage> )
<length-percentage> =
<length> |
<percentage>
Ví dụ
HTML
<div>Tĩnh</div>
<div class="moved">Đã di chuyển</div>
<div>Tĩnh</div>
CSS
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: translateY(10px);
background-color: pink;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-translatey |