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.
Thetranslate3d()CSSfunction 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> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>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 movesin each direction.
Syntax
translate3d(tx, ty, tz)Values
txIs a
<length>or<percentage>representing the abscissa (horizontal, x-component) of thetranslating vector [tx, ty, tz].tyIs a
<length>or<percentage>representing the ordinate (vertical, y-component)of thetranslating vector [tx, ty, tz].tzIs 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>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>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
Loading…