translate
Mit der CSS-Eigenschaft translate
CSS können Sie Transformationen einzeln und unabhängig von der Eigenschaft transform
angeben. Dies entspricht eher der typischen Verwendung auf der Benutzeroberfläche und erspart es, sich die genaue Reihenfolge der Transformationsfunktionen zu merken, die im Transformationswert angegeben werden müssen.
Syntax
/* Standardwert */
translate: none;
/* Einzelwert */
translate: 100px;
translate: 50%;
/* Zwei Werte */
translate: 100px 200px;
translate: 50% 105px;
/* Drei Werte */
translate: 50% 105px 5rem;
Values
- Einzelwert
<length-percentage>
(en-US) - Ein Einzelwert als
<länge>
oder<prozentsatz>
, der eine 2D-Verschiebung angibt, die eine gleiche Verschiebung entlang der X- und Y-Achse spezifiziert. Äquivalent zu einer Funktiontranslate()
(2D-Übersetzung) mit zwei angegebenen Werten. - Zwei Werte
<length-percentage>
(en-US) - Zwei Werte als
<länge>
oder<prozentsatz>
, wobei der erste Wert für die Verschiebung auf der X- und der Zweite auf der Y-Achse steht. - Drei Werte
<length-percentage>
(en-US) - Zwei Werte als
<länge>
oder<prozentsatz>
und ein dritter Wert im Format<length>
, die die Verchiebung auf der X-, Y-, und Z-Achse spezifizieren. Entspricht der Funktiontranslate3d()
(3D-Verschiebung). none
- Gibt an, dass keine Verschiebung angewendet werden soll.
Formale Definition
Initialwert | 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
Beispiel
HTML
<div>
<p class="translate">Translation</p>
</div>
CSS
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
div {
width: 150px;
margin: 0 auto;
}
p {
padding: 10px 5px;
border: 3px solid black;
border-radius: 20px;
width: 150px;
font-size: 1.2rem;
text-align: center;
}
.translate {
transition: translate 1s;
}
div:hover .translate {
translate: 200px 50px;
}
Result
Spezifikation
Spezifikation | Status | Kommentar |
---|---|---|
CSS Transforms Level 2 Die Definition von 'individual transforms' in dieser Spezifikation. |
Bearbeiterentwurf | Ursprüngliche Definition |
Browser-Kompatibilität
BCD tables only load in the browser
See also
Note: skew is not an independent transform value