Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
translate()
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.
Dietranslate()CSSFunktion verschiebt ein Element in den horizontalen und/oder vertikalen Richtungen. Das Ergebnis ist ein<transform-function> Datentyp.
Probieren Sie es aus
transform: translate(0);transform: translate(42px, 18px);transform: translate(-2.1rem, -2ex);transform: translate(3ch, 3mm);<section> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>#static-element { opacity: 0.4; position: absolute;}#example-element { position: absolute;}Diese Transformation wird durch einen zweidimensionalen Vektor [tx, ty] charakterisiert. Seine Koordinaten definieren, wie stark sich das Element in jede Richtung bewegt.
Syntax
/* Single <length-percentage> values */transform: translate(200px);transform: translate(50%);/* Double <length-percentage> values */transform: translate(100px, 200px);transform: translate(100px, 50%);transform: translate(30%, 200px);transform: translate(30%, 50%);Werte
- Einzelne
<length-percentage>-Werte Dieser Wert ist ein
<length>oder<percentage>, der die Abszisse(horizontal, x-Komponente) des Verschiebungsvektors [tx, 0] darstellt. Die Ordinate (vertikal, y-Komponente) des Verschiebungsvektors wird auf0gesetzt. Zum Beispiel isttranslate(2px)äquivalent zutranslate(2px, 0). Ein Prozentwert bezieht sich auf die Breite der durch dietransform-boxEigenschaft definierten Referenzbox.- Doppelte
<length-percentage>-Werte Dieser Wert beschreibt zwei
<length>oder<percentage>Werte, die sowohl die Abszisse (horizontal, x-Komponente) als auch die Ordinate (vertikal, y-Komponente) des Verschiebungsvektors [tx, ty] darstellen. Ein Prozentwert als erster Wert bezieht sich auf die Breite, als zweiter Teil auf die Höhe der durch dietransform-boxEigenschaft definierten Referenzbox.
| Kartesische Koordinaten aufℝ^2 | Homogene Koordinaten aufℝℙ^2 | Kartesische Koordinaten aufℝ^3 | Homogene Koordinaten aufℝℙ^3 |
|---|---|---|---|
Eine Translation ist keine lineare Transformation in ℝ^2 und kann nicht mit einer kartesischen Koordinatenmatrix dargestellt werden. | |||
[1 0 0 1 tx ty] |
Formale Syntax
<translate()> =
translate(<length-percentage> ,<length-percentage>?)
<length-percentage> =
<length>|
<percentage>
Beispiele
Verwendung einer einachsigen Translation
HTML
<div>Static</div><div>Moved</div><div>Static</div>CSS
div { width: 60px; height: 60px; background-color: skyblue;}.moved { /* Equal to: translateX(10px) or translate(10px, 0) */ transform: translate(10px); background-color: pink;}Ergebnis
Kombination von y-Achsen- und x-Achsen-Translation
HTML
<div>Static</div><div>Moved</div><div>Static</div>CSS
div { width: 60px; height: 60px; background-color: skyblue;}.moved { transform: translate(10px, 10px); background-color: pink;}Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-translate |