CSS Reference Function

translate3d() 2h6b1d

The translate3d() function is a 3D transform function that is used to move an element in three-dimensional space. 5f6943

It is the three-dimensional equivalent of the percentage. Not including a unit type will cause the number to be interpreted as a “ unit”.

Positive translation values will move the element along the positive direction of the axis, and negative values will move it in the opposite direction.

Examples:

                  transform: translate3d(100px, 100px, -200px);
                  transform: translate3d(50%, -100%, 10%);
                  transform: translate3d(-100px, -30px, 50px);
                

The official syntax looks as follows:

transform: translate3d( tx , ty, tz);
                

For a better understanding of the transform functions, please refer to the transform entry.

Browser k5t66

The following is the table for three-dimensional CSS transformations:

CSS3 3D Transforms 733rg

Method of transforming an element in the third dimension using the `transform` property. Includes for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.

W3C Working Draft

ed from the following versions:

Desktop 3n671n

  • 36
  • 16
  • 10
  • 23
  • 9

Mobile / Tablet 4q224p

  • 9.0
  • 66
  • No
  • 66
  • 60

* denotes prefix required.

  • ed:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated June 11, 2020 at 9:37 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.