translateY()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
The translateY()
CSS function repositions an element vertically on the 2D plane. Its result
is a <transform-function>
data type.
Try it
Note: translateY(ty)
is equivalent to
translate(0, ty)
or
translate3d(0, ty, 0)
.
Syntax
/* <length-percentage> values */
transform: translateY(200px);
transform: translateY(50%);
Values
<length-percentage>
-
The value is a
<length>
or<percentage>
representing the ordinate (vertical, y-coordinate) of the translating vector [0, ty]. In Cartesian coordinate system it represents shift along y-axis. A percentage value refers to the height of the reference box defined by thetransform-box
property.
Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
---|---|---|---|
A translation is not a linear transformation in ℝ^2 and can't be represented using a Cartesian-coordinate matrix. |
|||
[1 0 0 1 0 t] |
Formal syntax
translateY(<length-percentage>
)
Examples
HTML
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
CSS
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: translateY(10px);
background-color: pink;
}
Result
Specifications
Specification |
---|
CSS Transforms Module Level 1 # funcdef-transform-translatey |
Browser compatibility
BCD tables only load in the browser