translate3d() function is a 3D transform function that is used to move an element in three-dimensional space.
It is the three-dimensional equivalent of the
translate() function. It is used to translate the element by a vector [tx, ty, tz], where tx is the translation along the x-axis, ty is the translation along the y-axis, and tz is the translation along the z-axis. The values tx, ty, and tz are provided either as a
<length> or as a
percentage. Not including a unit type will cause the number to be interpreted as a “user 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.
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.
The following is the support table for three-dimensional CSS transformations:
CSS3 3D Transforms Support
Method of transforming an element in the third dimension using the `transform` property. Includes support 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.
Current Status: W3C Working Draft
Supported from the following versions:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com