Kurs HTML

Wprowadzenie do funkcji translate()

Funkcja translate() jest jedną z podstawowych funkcji transformacji CSS. Służy ona do **przesuwania elementu** wzdłuż osi X (poziomo) i/lub osi Y (pionowo) względem jego pierwotnej pozycji. Przesunięcie to nie wpływa na pozycję innych elementów na stronie.

Istnieje kilka wariantów tej funkcji, pozwalających na precyzyjne kontrolowanie przesunięcia w 2D i 3D.

Przesunięcie 2D: translate(tx, [ty]), translateX(tx), translateY(ty)

translate(tx, [ty])

Podstawowa funkcja translate() przyjmuje jedną lub dwie wartości:

• Jedna wartość translate(tx): Przesuwa element tylko w poziomie (wzdłuż osi X) o podaną wartość tx. Odpowiada to translateX(tx).
• Dwie wartości translate(tx, ty): Przesuwa element w poziomie o tx i w pionie (wzdłuż osi Y) o ty.

Wartości mogą być podane w dowolnych jednostkach długości (np. px, em, %). Wartości dodatnie przesuwają element w prawo (X) i w dół (Y), a wartości ujemne w lewo (X) i w górę (Y).

Przykład:

.element1 {
  /* Przesuń o 50px w prawo */
  transform: translate(50px);
}

.element2 {
  /* Przesuń o 30px w prawo i 20px w dół */
  transform: translate(30px, 20px);
}

.element3 {
  /* Przesuń o 100% szerokości elementu w lewo */
  transform: translate(-100%); 
}

.element4 {
  /* Przesuń o 50% szerokości elementu w lewo i 50% wysokości w górę */
  /* (często używane do centrowania z position: absolute) */
  transform: translate(-50%, -50%);
}
Kopiuj

Uwaga na procenty: Wartości procentowe w translate() odnoszą się do **rozmiaru samego transformowanego elementu** (szerokości dla osi X, wysokości dla osi Y), a nie do rozmiaru rodzica.

translateX(tx)

Ta funkcja przesuwa element wyłącznie w poziomie (wzdłuż osi X) o podaną wartość tx.

.element {
  transform: translateX(100px); /* Przesuń o 100px w prawo */
}
Kopiuj

translateY(ty)

Ta funkcja przesuwa element wyłącznie w pionie (wzdłuż osi Y) o podaną wartość ty.

.element {
  transform: translateY(-20px); /* Przesuń o 20px w górę */
}
Kopiuj

Używanie translateX i translateY jest często czytelniejsze, gdy chcemy przesunąć element tylko w jednym kierunku.

Przesunięcie 3D: translateZ(tz), translate3d(tx, ty, tz)

Aby przesunięcia w osi Z (głębi) były widoczne, element nadrzędny musi mieć ustawioną perspektywę (np. za pomocą właściwości perspective) lub sama transformacja musi być zastosowana w kontekście 3D (np. przez transform-style: preserve-3d na rodzicu lub użycie perspective() w funkcji transform).

translateZ(tz)

Przesuwa element wzdłuż osi Z. Dodatnia wartość tz przesuwa element "bliżej" obserwatora (pozornie go powiększając), a ujemna wartość przesuwa go "dalej" (pozornie pomniejszając).

.parent {
  perspective: 500px; /* Ustaw perspektywę dla rodzica */
}

.element {
  transform: translateZ(100px); /* Przesuń o 100px "do przodu" */
}
Kopiuj

translate3d(tx, ty, tz)

Jest to funkcja skrócona, pozwalająca na jednoczesne przesunięcie elementu we wszystkich trzech wymiarach: X, Y i Z.

.parent {
  perspective: 500px;
}

.element {
  transform: translate3d(50px, -20px, 150px);
}
Kopiuj

Wydajność: Czasami można spotkać się z opinią, że użycie translate3d(tx, ty, 0) zamiast translate(tx, ty) może wymusić akcelerację sprzętową (GPU) dla transformacji, co potencjalnie poprawia wydajność animacji. Chociaż współczesne przeglądarki są już dość inteligentne w optymalizacji, bywa to stosowane jako tzw. "hack" na wydajność w bardziej złożonych scenariuszach.