`translate` CSS property

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit August 2022 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft translate ermöglicht es Ihnen, Verschiebungstransformationen einzeln und unabhängig von der Eigenschaft transform festzulegen. Dies entspricht besser der typischen Verwendung von Benutzeroberflächen und erspart es, sich die genaue Reihenfolge der Transformationsfunktionen merken zu müssen, die im Wert von transform angegeben werden soll.

Probieren Sie es aus

translate: none;

translate: 40px;

translate: 50% -40%;

translate: 20px 4rem;

translate: 20px 4rem 150px;

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

Syntax

css

/* Keyword value */
translate: none;

/* Single values */
translate: 100px;
translate: 50%;

/* Two values */
translate: 100px 200px;
translate: 50% 105px;

/* Three values */
translate: 50% 105px 5rem;

/* Global values */
translate: inherit;
translate: initial;
translate: revert;
translate: revert-layer;
translate: unset;

Werte

Einzelner <length-percentage>-Wert: Ein <length> oder <percentage>, der eine Verschiebung entlang der X-Achse angibt. Entspricht einer translate()-Funktion (2D-Verschiebung) mit einem einzelnen angegebenen Wert.
Zwei <length-percentage>-Werte: Zwei <length> oder <percentage>, die die Verschiebungswerte der X- bzw. Y-Achse einer 2D-Verschiebung angeben. Entspricht einer translate()-Funktion (2D-Verschiebung) mit zwei angegebenen Werten.
Drei Werte: Zwei <length-percentage>- und ein einzelner <length>-Wert, die die Verschiebungswerte der X-, Y- bzw. Z-Achse einer 3D-Verschiebung angeben. Entspricht einer translate3d()-Funktion (3D-Verschiebung).
none: Gibt an, dass keine Verschiebung angewendet werden soll.

Formale Definition

Anfangswert	`none`
Anwendbar auf	transformierbare Elemente
Vererbt	Nein
Prozentwerte	bezieht sich auf die Größe der äußeren Box
Berechneter Wert	relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	Transformation
Erstellt Stapelkontext	Ja

Formale Syntax

translate = 
  none                                                |
  <length-percentage> [ <length-percentage> <length>? ]?  

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

Beispiele

Verschieben eines Elements beim Darüberfahren mit der Maus

Dieses Beispiel zeigt, wie die Eigenschaft translate verwendet wird, um ein Element entlang dreier Achsen zu verschieben. Das erste Feld wird entlang der X-Achse verschoben und das zweite Feld entlang der X- und Y-Achse. Das dritte Feld wird entlang der X-, Y- und Z-Achse verschoben und wirkt aufgrund des Hinzufügens von perspective zum übergeordneten Element so, als würde es sich auf den Betrachter zubewegen.

HTML

html

<div class="wrapper">
  <div id="box1">translate X</div>
  <div id="box2">translate X,Y</div>
  <div id="box3">translate X,Y,Z</div>
</div>

CSS

css

.wrapper {
  perspective: 100px;
  display: inline-flex;
  gap: 1em;
}
.wrapper > div {
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}
#box1:hover {
  translate: 20px;
}

#box2:hover {
  translate: 20px 20px;
}

#box3:hover {
  translate: 5px 5px 30px;
}

Ergebnis

Spezifikationen

Spezifikation
CSS Transforms Module Level 2 # individual-transforms

Browser-Kompatibilität

Siehe auch

Hinweis: skew ist kein unabhängiger Transformationswert

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

translate CSS property

HTML

CSS

Ergebnis

Help improve MDN

`translate` CSS property