The translate function
The translate function sets an element
reposition along the X- and Y-axis. It is used
together with the
transform
property. The property value is any
size units.
It can take one or two parameters. If there are two parameters, the first parameter specifies the reposition along the X-axis, and the second - along the Y-axis. If there is single parameter, it specifies the reposition along the X-axis.
Parameter values can be positive and negative. A positive value on the X-axis shifts to the right, a negative value shifts to the left. A positive value on the Y-axis shifts down, a negative value shifts up.
Syntax
selector {
transform: translate(reposition along X-axis, reposition along Y-axis);
}
Example
If you hover over the block, it will
move 30px to the right:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(30px);
}
:
Example
If you hover over the block, it will move
30px to the left:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(-30px);
}
:
Example
If you hover over the block, it will move
15px to the right and 30px down:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translate(15px, 30px);
}
:
See also
-
the
translateXfunction
that specifies a reposition along the X-axis -
the
translateYfunction
that specifies a reposition along the Y-axis
