Funkcja translate() w CSS

Definicja i użycie

CSS translate() Funkcja pozwala na zmianę pozycji elementu.

translate() Funkcja w transform w użyciu atrybutu.

Przykład

Zmień pozycję elementu:

#myDiv1 {
  transform: translate(50px); /* Przesuwa element o 50px wzdłuż osi x i 0px wzdłuż osi y */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Przesuwa element o 50px wzdłuż osi x i 20px wzdłuż osi y */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Przesuwa element o 100px wzdłuż osi x i 30px wzdłuż osi y */
}

Spróbuj sam

Gramatyka CSS

translate(x, y)
Wartość Opis
x Wymagane. Definiuje odległość przesunięcia elementu wzdłuż osi x, może to być liczba lub procent.
y

Opcjonalne. Definiuje odległość przesunięcia elementu wzdłuż osi y, może to być liczba lub procent.

Jeśli pominie się, wartość ustawiana jest na 0.

Szczegóły techniczne

Wersja: CSS Transforms Module Level 1

Obsługa przeglądarek

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Strony związane

Tutorial:CSS 2D Transformacje

Odnośnik:Atrybut transform w CSS

Odnośnik:Funkcja translateX() w CSS

Odnośnik:Funkcja translateY() w CSS

Odnośnik:Atrybut transform HTML DOM