CSS translate() Function
The CSS translate() function allows you to change the position of
an element.
The translate() function is used within the transform property.
Example
Change position of an element:
#myDiv1 {
transform: translate(50px); /* moves the element 50px
along the x-axis */
}
#myDiv2 {
transform: translate(50px, 20px); /* moves the element 50px along the
x-axis, and 20px along the y-axis */
}
#myDiv3 {
transform: translate(100px, 30px); /* moves the element 100px along the
x-axis, and 30px along the y-axis */
}
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Function | |||||
|---|---|---|---|---|---|
| translate() | 1 | 12 | 3.5 | 3.1 | 10.5 |
CSS Syntax
translate(x, y)
| Value | Description |
|---|---|
| x | Required. A number or percent that defines how much the element should move along the x-axis |
| y | Optional. A number or percent that defines how much the element should move along the y-axis. If omitted, the value is set to 0. |
| Version: | CSS Transforms Module Level 1 |
|---|
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS translateX() function.
CSS reference: CSS translateY() function.
CSS tutorial: CSS 2D Transforms
HTML DOM reference: transform property
