Abakada: Back to Basics > Language References > CSS Properties > Display and Position Properties > translate Property
Changes the position of an element.
| CSS |
{ scale: none | length | percentage ( 1~3 ) } |
| Script |
object.style.scale = none | length | percentage ( 1~3 ) |
| Parameter |
Description |
Valid Values |
| none |
Specifies that no translation should be applied. |
the keyword none |
| single value |
Moves the element in a horizontal ( x-axis ) direction. |
Single floating-point number with a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ) or expressed as percentage. |
| two values |
Moves the element in both horizontal ( x-axis ) and vertical ( y-axis ) directions. |
Two floating-point numbers with a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ), or expressed as percentage. |
| three values |
Moves the element in X Y and Z directions. |
Three floating-point numbers with a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ). Only X and Y can be expressed as percentage. |
The property is read/write with a default value of none; this attribute is not inherited.
The translate property allows changing the position of elements.
translate may be specified as either the keyword value none or as one to three length values, separated by spaces.
Each value specifies a translation against one axis, in the order X, Y, then Z.
Positive values behave as follows: X moves right; Y moves down; Z moves forward in the stack order.
Negative values behave as follows: X moves left; Y moves up; Z moves backeard in the stack order.
A single value denotes the X-coordinate, or a movement in a horizontal direction.
element { translate: 125px }
|
|
| translate: 125px |
translate: -125px |
Two values denote the X and Y coordinates, or a movement in both horizontal and vertical directions, which specifies a 2d translation, equivalent to using the transform: translate( ) function.
element { translate: 100px 125% }
|
|
|
|
| translate: 0 125px |
translate: 0 -125px |
translate: 125px 125px |
translate: -125px 125px |
Three values denote the X, Y and Z coordinates, or a movement in both horizontal and vertical directions as well as forward or backward direction, which specifies a 3d translation, equivalent to using the transform: translate3d( ) function.
element { translate: 100px 125% 1.2em }
NOTE: 3D translate will work only on 3D objects. The Z value is ignored for 2D objects.
Here is an example that shows the effects of applying 3D translate using the transform: translate3d( ) function instead, but which is functionally equivalent.
Show me
translate in most cases is implemented with a transition to better illustrate the gradual transformation, unless an instantaneous or fixed change is desired, as in presenting the notion of speed.
The following example demonstrates the effects of passing different values to the translate property. Each effect reverts back to its initial state in 2 seconds, you may choose the next option then.
Notice also the use of a simple transition to better visualize the changes in position.
rotate, scale, transform