translate
Przesuwa element w poziomie, pionie lub w głąb, niezależnie od właściwości transform.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- elementy transformowalne
- JavaScript
element.style.translate = "20px 10px"
Przykład
#.toast {
translate: 0 20px;
opacity: 0;
transition: translate 0.3s, opacity 0.3s;
}
.toast.visible {
translate: 0 0;
opacity: 1;
}<div class="box toast" style="transition: translate .3s, opacity .3s; translate: 0 0;">Zapisano postęp ✓</div>
<script>
const toast = document.querySelector('.toast')
setInterval(() => {
const hidden = toast.style.opacity === '0'
toast.style.opacity = hidden ? '1' : '0'
toast.style.translate = hidden ? '0 0' : '0 20px'
}, 1500)
</script>Definicja i zastosowanie
#Właściwość translate to osobna wersja funkcji translate(). Dzięki niej przesunięcie można ustawić bez nadpisywania innych transformacji zapisanych w transform.
Jedna wartość przesuwa w poziomie, dwie w poziomie i pionie, a trzecia w osi Z. Procenty liczą się od rozmiaru samego elementu, więc translate: -50% -50% przesuwa element o połowę jego szerokości i wysokości.
Przeglądarka stosuje osobne właściwości w stałej kolejności: najpierw translate, potem rotate, potem scale, a na końcu transform.
Składnia
#translate: none | <x> <y>? <z>?;Wartości
#- Brak przesunięcia.
- Przesunięcie o 60px w prawo.
- 40px w lewo i 20px w dół.
procenty
Przesunięcie o część własnego rozmiaru.
Wartości w praktyce
#none
.demo { translate: none; }60px
.demo { translate: 60px; }-40px 20px
.demo { translate: -40px 20px; }50% -30%
.demo { translate: 50% -30%; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Osobne
translate,rotateiscalepozwalają animować jedną transformację bez przepisywania całegotransform. - Wyśrodkowanie elementu absolutnego:
left: 50%; top: 50%; translate: -50% -50%;.
Powiązane hasła
#- transformPrzesuwa, obraca, skaluje lub pochyla element bez wpływu na układ strony.
- rotateObraca element o podany kąt, niezależnie od właściwości transform.
- scalePowiększa lub pomniejsza element, niezależnie od właściwości transform.
- positionWybiera sposób pozycjonowania elementu: w przepływie, względnie, absolutnie, na stałe lub przyklejony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.