translate3d() CSS Function


The translate3d() CSS function is used to move elements in a three-dimensional space.


transform: translate3d( tx, ty, tz);


  • 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.
  • tzA positive value moves the element towards the viewer, and a negative value farther away.
Any length units accepted in CSS are accepted as values ​​- for example, pixels (px), inches (in), points (pt), etc. A positive value shifts forward, a negative one backwards. A value of 0 does not change the position of the element.


<img class="translate" src="images/nature.jpg" alt="Nature Image">
.translate {
transform: perspective(200px) translate3d(40px, 40px, 40px);

Browser Support

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

Last updated by CSSPortal on: 1st December 2019