CSS/Eigenschaften/äußere Gestaltung/Transformationen/translate

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft transform:translate() können Sie die Position eines Elements verschieben. So können Elemente, bzw. Teile der Webseite bei :hover oder mit Animationen bewegt werden. Dies sollte jedoch nie zum Selbstzweck werden.

  • CSS 3.0
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera


Empfehlung: Verwenden Sie die translate3d()-Funktion, da sie in vielen Browsern hardwarebeschleunigt ist, d.h. dass rechenintensive Operationen an die GPU ausgelagert werden. So können Animationen glatt und ruckelfrei ausgeführt werden.

Inhaltsverzeichnis

[Bearbeiten] Funktionen

Es gibt verschiedene Funktionen, die in Struktur und Syntax geringfügig abweichen:

Beispiel ansehen …
.box {
  border-radius: 10px;
  box-shadow: 1px 1px 10px 0;
  float: left;
  height: 200px;
  margin: 0 20px 0 0;
  padding: 20px;
  width: calc(33.33% - 60px);
  transition: all 2s;
}
 
main:hover .translateXY {
  transform: translate(calc(100% + 20px), 260px);
}
 
main:hover .translateX {
  transform: translatex(calc(100% + 20px));
}
 
main:hover .translateY {
  transform: translatey(260px);
}
Das Beispiel verwendet die Funktion calc(), um die Breite der drei Boxen auf die verfügbare Breite des Elternelements anzupassen. Damit nach der Animation die Boxen untereinander stehen, bedarf es der Angabe 100% zuzüglich eines eventuellen Außenabstandes (wieder mit calc() berechnet).

[Bearbeiten] translate()

transform: translate() benötigt folgende Angaben:

  • eine Längenangabe für die horizontale Verschiebung,
  • eine Längenangabe für die vertikale Verschiebung
Beachten Sie: Für die Längenangaben sind sowohl negative als auch positive Werte erlaubt.
Wenn nur ein Wert angegeben wird, wird nur die x-Achse verschoben.

[Bearbeiten] translateX()

transform: translateX() benötigt folgende Angaben:

Beachten Sie: Für die Längenangaben sind sowohl negative als auch positive Werte erlaubt.

[Bearbeiten] translateY()

transform: translateY() benötigt folgende Angaben:

Beachten Sie: Für die Längenangaben sind sowohl negative als auch positive Werte erlaubt.

[Bearbeiten] translateZ()

Die Funktion transform: translateZ() verschiebt ein Element entlang der Z-Achse nach vorne oder hinten.

Sie benötigt folgende Angaben:

Beachten Sie: Für die Längenangaben sind sowohl negative als auch positive Werte erlaubt.

[Bearbeiten] translate3d()

The translate3d(x, y, z)-Funktion verschiebt die Position eines Elements im dreidimensionalen Raum.

  • CSS 3.0
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera

Sie benötigt folgende Angaben:

  • x: eine Längenangabe für die Verschiebung auf der X-Achse
  • y: eine Längenangabe für die Verschiebung auf der Y-Achse
  • z: eine Längenangabe für die Verschiebung auf der /-Achse
    Beachten Sie: Für den dritten Wert wird eine absolute Längenangabe benötigt. Bei einer Prozentangabe wird die Transformation nicht ausgeführt.


Beispiel: Verschieben mit translate3d() ansehen …
.box {
  border-radius: 0.5em;
  float: left;
  height: 7em;
  width: 13em;
  margin: 0 1em 0 0;
  padding: 0.5em;
  transition: all 2s;
}
 
main:hover .translateXY {
  transform: translate3d(15em, 9em, 0);
}
 
main:hover .translateX {
  transform: translate3d(15em, 0, 0);
}
 
main:hover .translateY {
  transform: translate3d(0, 9em, 0);
}
Dieses Beispiel ähnelt dem oberen Beispiel, verwendet aber die hardwarebeschleunigte translate3d()-Funktion. Deshalb sind Werte für alle Koordinaten aufgeführt. Wird nur in eine Richtung verschoben, betragen die anderen Werte 0.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML