translate()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The translate()
CSS function repositions an element in the horizontal and/or vertical
directions. Its result is a
data type.
Try it
transform: translate(0);
transform: translate(42px, 18px);
transform: translate(-2.1rem, -2ex);
transform: translate(3ch, 3mm);
#static-element {
opacity: 0.4;
position: absolute;
}
#example-element {
position: absolute;
}
This transformation is characterized by a two-dimensional vector [tx, ty]. Its coordinates define how much the element moves in each direction.
Syntax
/* Single values */
transform: translate(200px);
transform: translate(50%);
/* Double values */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
Values
- Single
values -
This value is a
or
representing the abscissa (horizontal, x-component) of the translating vector [tx, 0]. The ordinate (vertical, y-component) of the translating vector will be set to0
. For example,translate(2px)
is equivalent totranslate(2px, 0)
. A percentage value refers to the width of the reference box defined by thetransform-box
property. - Double
values -
This value describes two
or
values representing both the abscissa (horizontal, x-component) and the ordinate (vertical, y-component) of the translating vector [tx, ty]. A percentage as first value refers to the width, as second part to the height of the reference box defined by thetransform-box
property.
Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
---|---|---|---|
A translation is not a linear transformation in ℝ^2 and can't be represented using a Cartesian-coordinate matrix. |
|
|
|
[1 0 0 1 tx ty] |
Formal syntax
Examples
Using a single-axis translation
HTML
Static
Moved
Static
CSS
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
/* Equal to: translateX(10px) or translate(10px, 0) */
transform: translate(10px);
background-color: pink;
}
Result
Combining y-axis and x-axis translation
HTML
Static
Moved
Static
CSS
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: translate(10px, 10px);
background-color: pink;
}
Result
Specifications
Specification |
---|
CSS Transforms Module Level 1 # funcdef-transform-translate |