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:
-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:
/* 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);

An example to apply translate when h1 is hovered.

<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);
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:
#ad3 h1 span {
font-size: 30px;
color: #999999;
Related Tutorial
3 Scale
4 Rotate
5 Skew
Follow Us #