Kurs HTML

Co to jest punkt transformacji?

W poprzednich lekcjach widzieliśmy, jak funkcje scale(), rotate() i skew() modyfikują element. Domyślnie te transformacje odbywają się względem **środka elementu**. Właściwość transform-origin pozwala nam **zmienić ten punkt odniesienia**, czyli punkt, wokół którego lub od którego transformacja jest stosowana.

Zmiana transform-origin może drastycznie zmienić wizualny efekt transformacji, nawet jeśli sama funkcja transformacji pozostaje taka sama.

Składnia transform-origin

Właściwość transform-origin przyjmuje jedną, dwie lub trzy wartości, które definiują położenie punktu transformacji na osiach X, Y i Z.

Wartości 2D (X, Y)

Najczęściej używa się dwóch wartości do zdefiniowania punktu w płaszczyźnie 2D:

transform-origin: [wartość-X] [wartość-Y];Kopiuj

• wartość-X: Określa pozycję w poziomie. Może to być:
  • Słowo kluczowe: left, center (domyślne), right.
  • Wartość długości: np. 50px, 2em (od lewej krawędzi).
  • Wartość procentowa: np. 25%, 100% (od lewej krawędzi, 50% to środek).
• wartość-Y: Określa pozycję w pionie. Może to być:
  • Słowo kluczowe: top, center (domyślne), bottom.
  • Wartość długości: np. 10px (od górnej krawędzi).
  • Wartość procentowa: np. 0% (góra), 75% (od górnej krawędzi).

Skrócone zapisy:

• Jedna wartość: Jeśli podasz tylko jedną wartość, będzie ona traktowana jako wartość-X, a wartość-Y przyjmie domyślnie center. Wyjątkiem są słowa kluczowe top i bottom, które zostaną potraktowane jako wartość-Y, a wartość-X będzie center.
• Domyślna wartość: Jeśli nie podasz transform-origin, domyślną wartością jest center center (lub 50% 50%).

Przykłady 2D:

.element1 {
  /* Domyślnie - środek */
  transform-origin: center center; /* lub 50% 50% */
  transform: rotate(45deg);
}

.element2 {
  /* Lewy górny róg */
  transform-origin: left top; /* lub 0% 0% */
  transform: rotate(45deg);
}

.element3 {
  /* Środek dolnej krawędzi */
  transform-origin: bottom; /* lub center bottom lub 50% 100% */
  transform: scaleY(1.5);
}

.element4 {
  /* Punkt 75% od lewej, 20px od góry */
  transform-origin: 75% 20px;
  transform: scale(0.8);
}
Kopiuj

Wartości 3D (X, Y, Z)

Można również podać trzecią wartość, aby zdefiniować pozycję punktu transformacji na osi Z. Jest to istotne przy transformacjach 3D.

transform-origin: [wartość-X] [wartość-Y] [wartość-Z];Kopiuj

• wartość-Z: Określa pozycję wzdłuż osi Z. Jest to wartość długości (np. px, em). Wartość domyślna to 0. Ujemne wartości przesuwają punkt "dalej" od obserwatora, dodatnie "bliżej".

Przykład 3D:

.parent {
  perspective: 600px;
}

.element {
  /* Punkt transformacji przesunięty o 100px "do przodu" */
  transform-origin: center center -100px; 
  transform: rotateY(60deg);
}
Kopiuj

W tym przykładzie element będzie się obracał wokół osi Y, ale punkt obrotu będzie znajdował się 100px "za" elementem (dalej od widza), co wpłynie na efekt perspektywy.

Wpływ transform-origin na różne transformacje

• rotate(): Określa punkt, wokół którego odbywa się obrót.
• scale(): Określa punkt, który pozostaje nieruchomy podczas skalowania; element rozszerza się lub kurczy względem tego punktu.
• skew(): Określa punkt, który pozostaje nieruchomy podczas pochylania.
• translate(): Właściwość transform-origin **nie ma wpływu** na działanie funkcji translate(). Przesunięcie jest zawsze względne do pierwotnej pozycji elementu, niezależnie od punktu transformacji.