translate3d() CSS function
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: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(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. |
|
|
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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
translate3d()
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support