CSS translate Eigenschaft

Definition und Verwendung

translate Eigenschaft ermöglicht es Ihnen, die Position des Elements zu ändern.

translate Eigenschaft definiert die X- und Y-Koordinaten des Elements im zweidimensionalen Raum. Sie können auch die Z-Achsenkoordinate definieren, um die Position im dreidimensionalen Raum zu ändern.

Koordinaten können nur die X-Achsenkoordinate, die Koordinaten der X- und Y-Achse oder die Koordinaten der X-, Y- und Z-Achse angeben.

Um ein besseres Verständnis zu bekommen translate Eigenschaft, sieheDemonstration.

Tipp:Um die Eigenschaft der Z-Achse zu aktivieren, müssen Sie einen Wert für die Eigenschaft CSS perspective definieren.

Hinweis:Eine andere Methode, Elemente zu verschieben, ist die Verwendung von CSS translate() Funktion Die Eigenschaft CSS transform dieser Seite ist eine einfachere und direktere Methode, um Elemente zu verschieben.

Beispiel

Beispiel 1

Position des Elements ändern:

div {
  translate: 100px 20px;
}

Probieren Sie es selbst aus

Beispiel 2

Wenn Sie die Eigenschaft der Z-Achse translate einstellen, müssen Sie diese auch im übergeordneten Element einstellen perspective Um eine Wirkung zu erzielen, müssen wir die Eigenschaft

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

Probieren Sie es selbst aus

CSS-Syntax

translate: x-axis y-axis z-axis|initial|inherit;

Eigenschaftswert

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diese Eigenschaft vollständig unterstützt.

Verwandte Seiten

CSS-Tutorial:CSS 2D Transformation

CSS-Tutorial:CSS 3D Transformation

CSS-Referenz:CSS scale Eigenschaft

CSS-Referenz:CSS rotate Eigenschaft

CSS-Referenz:CSS perspective Eigenschaft