translate3d()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die translate3d() CSS Funktion positioniert ein Element im 3D-Raum neu. Ihr Ergebnis ist ein <transform-function> Datentyp.
Probieren Sie es aus
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);
}
Diese Transformation wird durch einen dreidimensionalen Vektor [tx, ty, tz] charakterisiert. Seine Koordinaten definieren, wie stark sich das Element in jede Richtung bewegt.
Syntax
translate3d(tx, ty, tz)
Werte
tx-
Ist eine
<length>oder<percentage>, die die Abszisse (horizontal, x-Komponente) des verschiebenden Vektors [tx, ty, tz] repräsentiert. ty-
Ist eine
<length>oder<percentage>, die die Ordinate (vertikal, y-Komponente) des verschiebenden Vektors [tx, ty, tz] repräsentiert. tz-
Ist eine
<length>, die die z-Komponente des verschiebenden Vektors repräsentiert. Es kann kein<percentage>Wert sein; in diesem Fall wird die Eigenschaft mit der Transformation 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 durch eine Matrix in kartesischen Koordinaten dargestellt werden. |
|
|
Formale Syntax
<translate3d()> =
translate3d( <length-percentage> , <length-percentage> , <length> )
<length-percentage> =
<length> |
<percentage>
Beispiele
Verwendung einer einachsigen Verschiebung
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;
}
Ergebnis
Kombination von z-Achsen- und x-Achsen-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;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-translate3d |
Browser-Kompatibilität
Loading…