translate
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.
Die translate
CSS-Eigenschaft ermöglicht es Ihnen, Übersetzungstransformationen einzeln und unabhängig von der transform
-Eigenschaft anzugeben. Dies passt besser zu typischer Benutzeroberflächen-Nutzung und erspart Ihnen das Merken der genauen Reihenfolge der Transformationsfunktionen, die im transform
-Wert anzugeben sind.
Probieren Sie es aus
translate: none;
translate: 40px;
translate: 50% -40%;
translate: 20px 4rem;
translate: 20px 4rem 150px;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 800px;
perspective-origin: 150% 150%;
}
#example-element {
width: 100px;
height: 100px;
perspective: 550px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
Syntax
/* Keyword values */
translate: none;
/* Single values */
translate: 100px;
translate: 50%;
/* Two values */
translate: 100px 200px;
translate: 50% 105px;
/* Three values */
translate: 50% 105px 5rem;
/* Global values */
translate: inherit;
translate: initial;
translate: revert;
translate: revert-layer;
translate: unset;
Werte
- Einzelner
<length-percentage>
-Wert -
Ein
<length>
oder<percentage>
, der eine Übersetzung entlang der X-Achse angibt. Entspricht einertranslate()
-Funktion (2D-Übersetzung) mit einem einzelnen angegebenen Wert. - Zwei
<length-percentage>
-Werte -
Zwei
<length>
oder<percentage>
, die die X- und Y-Achsen-Übersetzungswerte (jeweils) einer 2D-Übersetzung angeben. Entspricht einertranslate()
-Funktion (2D-Übersetzung) mit zwei angegebenen Werten. - Drei Werte
-
Zwei
<length-percentage>
- und ein<length>
-Wert, die die X-, Y- und Z-Achsen-Übersetzungswerte (jeweils) einer 3D-Übersetzung angeben. Entspricht einertranslate3d()
-Funktion (3D-Übersetzung). none
-
Gibt an, dass keine Übersetzung angewendet werden soll.
Formale Definition
Anfangswert | 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
Beispiele
Übersetzen eines Elements beim Hover
Dieses Beispiel zeigt, wie die translate
-Eigenschaft verwendet wird, um ein Element in drei Achsen zu verschieben.
Das erste Kästchen wird entlang der X-Achse verschoben und das zweite Kästchen wird entlang der X- und Y-Achsen verschoben.
Das dritte Kästchen wird entlang der X-, Y- und Z-Achsen verschoben und hat das Erscheinungsbild, sich dem Betrachter zu nähern, durch die Hinzufügung von perspective
zum Elternelement.
HTML
<div class="wrapper">
<div id="box1">translate X</div>
<div id="box2">translate X,Y</div>
<div id="box3">translate X,Y,Z</div>
</div>
CSS
.wrapper {
perspective: 100px;
display: inline-flex;
gap: 1em;
}
.wrapper > div {
width: 7em;
line-height: 7em;
text-align: center;
transition: 0.5s ease-in-out;
border: 3px dotted;
}
#box1:hover {
translate: 20px;
}
#box2:hover {
translate: 20px 20px;
}
#box3:hover {
translate: 5px 5px 30px;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Transforms Module Level 2 # individual-transforms |