CSS3 Transforms | The translate() Method

The translate() method moves an element from its current position. The first parameter is for the x-axis (100px in our example) and the second is for the y-axis (50px in our example).

Positive values push an element down and to the right. Negative values pull an element up and to the left.

#div6 {
	height: 100px;
	width: 100px;
	background-color: orange;
	padding: 50px;
	margin-bottom: 30px;
#div6:hover {
	transform:translate(100px, 50px);

You can position an element by setting margins but translate is a better choice for animating elements.

Leave a Reply