Kurs HTML

Wprowadzenie do funkcji rotate()

Funkcja rotate() pozwala na **obracanie elementu** wokół jego punktu transformacji (transform-origin, domyślnie środek elementu). Obrót może odbywać się w płaszczyźnie 2D lub w przestrzeni 3D wokół określonych osi.

Podobnie jak inne transformacje, obrót nie wpływa na otaczający layout.

Obrót 2D: rotate(kąt)

Najprostsza forma funkcji rotate() przyjmuje jedną wartość reprezentującą **kąt obrotu** w płaszczyźnie 2D (wokół osi Z, która jest prostopadła do ekranu).

Jednostki kątów:

• deg (degrees): Stopnie. Pełny obrót to 360deg. Najczęściej używana jednostka.
• grad (gradians): Gradiany. Pełny obrót to 400grad.
• rad (radians): Radiany. Pełny obrót to 2π radianów (ok. 6.283rad).
• turn: Obroty. 1turn oznacza pełny obrót (360deg).

Dodatnia wartość kąta oznacza obrót **zgodnie z ruchem wskazówek zegara**, a ujemna wartość oznacza obrót **przeciwnie do ruchu wskazówek zegara**.

Przykład:

.element1 {
  /* Obróć o 45 stopni zgodnie z ruchem wskazówek zegara */
  transform: rotate(45deg);
}

.element2 {
  /* Obróć o ćwierć obrotu przeciwnie do ruchu wskazówek zegara */
  transform: rotate(-0.25turn);
}

.element3 {
  /* Obróć o 90 stopni (równoważne 100grad) */
  transform: rotate(100grad);
}
Kopiuj

Obrót 3D: rotateX(kąt), rotateY(kąt), rotateZ(kąt), rotate3d(x, y, z, kąt)

Aby obroty 3D (wokół osi X i Y) były widoczne, element lub jego rodzic musi mieć ustawioną perspektywę (perspective) lub być częścią kontekstu renderowania 3D (transform-style: preserve-3d).

rotateX(kąt)

Obraca element wokół osi X (osi poziomej). Wyobraź sobie, że oś X przechodzi poziomo przez środek elementu. Obrót powoduje "pochylenie" górnej krawędzi do przodu lub do tyłu.

.parent {
  perspective: 500px;
}
.element {
  transform: rotateX(60deg); /* Pochyl górną krawędź "do tyłu" */
}
Kopiuj

rotateY(kąt)

Obraca element wokół osi Y (osi pionowej). Wyobraź sobie oś Y przechodzącą pionowo przez środek elementu. Obrót powoduje "obracanie się" elementu jak na karuzeli wokół tej osi.

.parent {
  perspective: 500px;
}
.element {
  transform: rotateY(45deg); /* Obróć wokół pionowej osi */
}
Kopiuj

rotateZ(kąt)

Obraca element wokół osi Z (osi prostopadłej do ekranu). Jest to **równoważne** z podstawową funkcją rotate(kąt) dla obrotów 2D.

.element {
  transform: rotateZ(30deg); /* To samo co rotate(30deg) */
}
Kopiuj

rotate3d(x, y, z, kąt)

Jest to najbardziej zaawansowana funkcja obrotu. Pozwala zdefiniować **niestandardową oś obrotu** w przestrzeni 3D za pomocą wektora [x, y, z], a następnie obrócić element wokół tej osi o podany kąt.

• x, y, z: Liczby określające kierunek wektora osi obrotu. Np. 1, 0, 0 to oś X, 0, 1, 0 to oś Y, 1, 1, 0 to oś pod kątem 45 stopni w płaszczyźnie XY.
• kąt: Kąt obrotu wokół zdefiniowanej osi.

.parent {
  perspective: 500px;
}
.element {
  /* Obróć o 60 stopni wokół osi przechodzącej przez wektor [1, 1, 0] */
  transform: rotate3d(1, 1, 0, 60deg);
}
Kopiuj

Funkcja rotate3d jest rzadziej używana niż dedykowane funkcje rotateX, rotateY, rotateZ, ale daje największą elastyczność.

Obrót a transform-origin

Podobnie jak przy skalowaniu, właściwość transform-origin określa punkt, wokół którego odbywa się obrót. Zmiana tego punktu ma kluczowe znaczenie dla efektu końcowego.

Przykład:

.element-center {
  transform: rotate(45deg); /* Obrót wokół środka */
}

.element-top-left {
  transform-origin: top left; /* Ustaw punkt na lewy górny róg */
  transform: rotate(45deg); /* Obrót wokół lewego górnego rogu */
}
Kopiuj

W drugim przypadku element będzie się obracał jak wskazówka zegara zamocowana w lewym górnym rogu.