Funkcja CSS translateX()

Definicja i użycie

CSS translateX() Funkcja pozwala na ponowne pozycjonowanie elementów wzdłuż osi x (kierunku poziomego).

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

Przykład

Przywracanie różnym elementom <div> nowej pozycji w kierunku poziomym:

#myDiv1 {
  transform: translateX(50px); /* Przesuwa element wzdłuż osi x o 50px */
}
#myDiv2 {
  transform: translateX(100px); /* Przesuwa element wzdłuż osi x o 100px */
}
#myDiv3 {
  transform: translateX(-10px); /* Przesuwa element wzdłuż osi x o -10px */
}

Spróbuj sam

Gramatyka CSS

translateX(x)
Wartość Opis
x Wymagane. Definiuje odległość elementu wzdłuż osi x, może być liczbą lub procentem.

Szczegóły techniczne

Wersja: Moduł Transforms CSS Level 1

Obsługa przeglądarek

Liczby w tabeli oznaczają 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

powiązane strony

Tutorial:Przekształcenia 2D w CSS

Zobacz:Atrybut transform w CSS

Zobacz:Funkcja translate() w CSS

Zobacz:Funkcja translateY() w CSS

Zobacz:Atrybut transform w HTML DOM