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);
}

translate function

Syntax

Example

Example

Example

See also