CSS Properties Index   Positioning Properties

---

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.
two 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.

A single value denotes the X-coordinate, or a movement in a horizontal direction.

element { translate: 100px }

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% }

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 }

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.

NOTE: A 2D translate is similar to changing the bottom, left, right and top properties of an element.

The following example demonstrates the effects of passing different values to the translate property. Note that the effect will revert back to normal after 2 seconds, to default to the initial state.

Notice also the use of a simple transition to better visualize the changes in position.

 Show me 

rotate, scale, transform