translate3d()

Baseline Widely available

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

Die translate3d() CSS Funktion positioniert ein Element im 3D-Raum um. Ihr Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

transform: translate3d(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);
}

Diese Transformation ist durch einen dreidimensionalen Vektor [tx, ty, tz] gekennzeichnet. Ihre Koordinaten definieren, wie weit sich das Element in jede Richtung bewegt.

Syntax

css
translate3d(tx, ty, tz)

Werte

tx

Ist ein <length> oder <percentage>, der die Abszisse (horizontale, x-Komponente) des Translationsvektors [tx, ty, tz] darstellt.

ty

Ist ein <length> oder <percentage>, der die Ordinate (vertikale, y-Komponente) des Translationsvektors [tx, ty, tz] darstellt.

tz

Ist ein <length>, der die z-Komponente des Translationsvektors darstellt. Es kann kein <percentage> Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet [tx, ty, tz].

Kartesische Koordinaten auf ℝ^2 Homogene Koordinaten auf ℝℙ^2 Kartesische Koordinaten auf ℝ^3 Homogene Koordinaten auf ℝℙ^3

Diese Transformation gilt für den 3D-Raum und kann nicht auf der Ebene dargestellt werden.

Eine Translation ist keine lineare Transformation in ℝ^3 und kann nicht mit einer kartesischen Koordinatenmatrix dargestellt werden.
(100tx010ty001tz0001)\left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{array} \right)

Formale Syntax

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

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

Beispiele

Verwendung einer Translation entlang einer einzigen Achse

HTML

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

CSS

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;
}

Ergebnis

Kombination von z-Achsen- und x-Achsen-Translation

HTML

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

CSS

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

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

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 2
# funcdef-translate3d

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch