Translate

Translation function is used to move elements left, right, up, or down. These functions are similar to the behaviour of position: relative; where you declare top and left.

Unlike position: relative, a translated element can only be moved relative to its current position.

The translate(x,y) function moves an element by x from the left, and y from the top:

snippet

-webkit-transform: translate(45px,-45px);
-moz-transform: translate(45px,-45px);
-ms-transform: translate(45px,-45px);
-o-transform: translate(45px,-45px);
transform: translate(45px,-45px);

translatex & translatey

If you only want to move an element vertically or horizontally, you can use the translatex or translatey functions:

snippet

/* Translate X - horizontally */
-webkit-transform: translatex(45px);
-moz-transform: translatex(45px);
-ms-transform: translatex(45px);
-o-transform: translatex(45px);
transform: translatex(45px);

/* Translate Y - vertically */
-webkit-transform: translatey(-45px);
-moz-transform: translatey(-45px);
-ms-transform: translatey(-45px);
-o-transform: translatey(-45px);
transform: translatey(-45px);

Example:-
An example to apply translate when h1 is hovered.

snippet

<h1>Put your <span>dukes</span> up sire</h1>

#ad3 h1:hover span {
	color: #484848;
	-webkit-transform: translateX(40px);
	-moz-transform: translateX(40px);
	-ms-transform: translateX(40px);
	-o-transform:translateX(40px);
	transform: translateX(40px);
}

To make it work on webkit, since it only allow you to transform block-level elements; inline elements are off-limits. To fix it add display: inline-block; to our span:

snippet

#ad3 h1 span {
	font-size: 30px;
	color: #999999;
	display:inline-block;
}