CSS/Funktionen/translate3d()

Browserunterstützung
caniuse.com

Die CSS-Funktion translate3d() positioniert ein Element im dreidimensionalen Raum. Ihr Ergebnis ist ein Datentyp <Transformationsfunktion>

anwendbar auf

• HTML-Blockelemente, mit Ausnahme von nicht ersetzten Inline-Elementen
• SVG-Elemente

Parameter

* eine (positive oder negative) Längenangabe oder Prozentwert für die horizontale Verschiebung,

• eine Längenangabe oder Prozentwert für die vertikale Verschiebung
• eine Längenangabe für die Z-Achse
  ein Prozentwert würde hier zu einem ungültigen Wert führen!

Beispiel

.moved {
  /* Equivalent to perspective(500px) translateX(10px) */
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}

 

Siehe auch

• Transform
  • Transform#transform-Eigenschaft
  • SVG-Transformationen
• CSS/Eigenschaften/translate

Weblinks

• CSSWG: The Transform Functions CSS Transforms Module Level 2
  • 2D Transform Functions CSS Transforms Module Level 1
• MDN: translate3d()
• Browser-Support: caniuse.com