The translateX function
The translateX function sets an
element reposition along the X-axis. It
is used together with the
transform
property. The property value is any
size units.
A positive value shifts to the right,
a negative value shifts to the left.
Syntax
selector {
transform: translateX(reposition);
}
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: translateX(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: translateX(-30px);
}
:
See also
-
the
translatefunction
that specifies a reposition along the X- and Y-axes -
the
translateYfunction
that specifies a reposition along the Y-axis
