CSS translate() Function
Example
Change position of an element:
#myDiv1 {
transform: translate(50px); /* moves the element 50px
along the x-axis, and 0px along the y-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 »
Definition and Usage
The CSS translate() function allows you to change the position of
an element.
The translate() 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 | |||||
|---|---|---|---|---|---|
| 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. |
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
