CSS translateX() Function
Example
Re-position different <div> elements horizontally:
#myDiv1 {
transform: translateX(50px); /* moves the element 50px
along the x-axis */
}
#myDiv2 {
transform: translateX(100px); /* moves the element 100px along the
x-axis */
}
#myDiv3 {
transform: translateX(-10px); /* moves the element -10px along the
x-axis */
}
Try it Yourself »
Definition and Usage
The CSS translateX() function allows you to
re-position
an element along the x-axis (horizontally).
The translateX() 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 | |||||
|---|---|---|---|---|---|
| translateX() | 1 | 12 | 3.5 | 3.1 | 10.5 |
CSS Syntax
translateX(x)
| Value | Description |
|---|---|
| x | Required. A number or percent that defines how much the element should move along the x-axis |
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS translate() function.
CSS reference: CSS translateY() function.
CSS tutorial: CSS 2D Transforms
HTML DOM reference: transform property
