translate() CSS Function

Description

The translate() CSS function shifts the element relative to the original location by a given value horizontally and vertically.

Syntax

transform: translate( tx [, ty ]? ); 
/* the question mark indicates the second value is optional */

Values

  • txHorizontal shift. A positive value shifts to the right, a negative value to the left.
  • tyVertical shift. A positive value moves up, a negative value down. If the value is not specified, then the default value is 0 and no vertical shift occurs.
Any unit of length accepted in CSS is accepted as values ​​- for example, pixels (px), inches (in), points (pt), etc. One value moves an element only horizontally, two values ​​move an element horizontally and vertically independently. A value of 0 does not change the position of the element.

Example

<img class="translate" src="images/nature.jpg" alt="Nature Image">
.translate {

    transform: translate(50px, 30px);

}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????