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;
}
Related Tutorial
3. Scale
4. Rotate
5. Skew
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #