translate3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The translate3d() CSS function repositions an element in 3D space. Its result is a <transform-function> data type.

Try it

transform: translate3d(0, 0, 0);

transform: translate3d(42px, -62px, -135px);

transform: translate3d(-2.7rem, 0, 1rem);

transform: translate3d(5ch, 0.4in, 5em);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

This transformation is characterized by a three-dimensional vector [tx, ty, tz]. Its coordinates define how much the element moves in each direction.

Syntax

translate3d(tx, ty, tz)

Values

tx: Is a <length> or <percentage> representing the abscissa (horizontal, x-component) of the translating vector [tx, ty, tz].
ty: Is a <length> or <percentage> representing the ordinate (vertical, y-component)of the translating vector [tx, ty, tz].
tz: Is a <length> representing the z-component of the translating vector. It can't be a <percentage> value; in that case the property containing the transform is considered invalid [tx, ty, tz].

Cartesian coordinates on ℝ^2	Homogeneous coordinates on ℝℙ^2	Cartesian coordinates on ℝ^3	Homogeneous coordinates on ℝℙ^3
This transformation applies to the 3D space and can't be represented on the plane.		A translation is not a linear transformation in ℝ^3 and can't be represented using a Cartesian-coordinate matrix.	$\left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{array} \right)$

Formal syntax

<translate3d()> = 
  translate3d( <length-percentage> , <length-percentage> , <length> )  

<length-percentage> = 
  <length>      |
  <percentage>

Examples

Using a single axis translation

HTML

<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /* Equivalent to perspective(500px) translateX(10px) */
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}

Result

Combining z-axis and x-axis translation

HTML

<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translate3d(10px, 0, 100px);
  background-color: pink;
}

Result

Specifications

Specification
CSS Transforms Module Level 2 # funcdef-translate3d

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`translate3d`	12	12	10	15	4	18	10	14	3.2	1.0	3

Try it

Syntax

Values

Formal syntax

Examples

Using a single axis translation

HTML

CSS

Result

Combining z-axis and x-axis translation

HTML

CSS

Result

Specifications

Browser compatibility

See also