CSS translateY() Function
Example
Re-position different <div> elements vertically:
#myDiv1 {
transform: translateY(30px); /* moves the element 30px
along the y-axis */
}
#myDiv2 {
transform: translateY(50px); /* moves the element 50px along the
y-axis */
}
#myDiv3 {
transform: translateY(-10px); /* moves the element -10px along the
y-axis */
}
Try it Yourself »
Definition and Usage
The CSS translateY() function allows you to
re-position
an element along the y-axis (vertically).
The translateY() function is used within the transform property.
| Version: | CSS Transforms Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Function | |||||
|---|---|---|---|---|---|
| translateY() | 1 | 12 | 3.5 | 3.1 | 10.5 |
CSS Syntax
translateY(y)
| Value | Description |
|---|---|
| y | Required. A number or percent that defines how much the element should move along the y-axis |
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS translate() function.
CSS reference: CSS translateX() function.
CSS tutorial: CSS 2D Transforms
HTML DOM reference: transform property
