Kurs HTML

Wprowadzenie do funkcji skew()

Funkcja skew() (pochylenie, przekształcenie ścinające) jest transformacją 2D, która **pochyla element** wzdłuż osi X i/lub Y. Wyobraź sobie prostokątny element - skew() "przesuwa" jego przeciwległe boki w przeciwnych kierunkach, zamieniając go w równoległobok.

Podobnie jak inne transformacje, skew() nie wpływa na otaczający layout, a pochylenie odbywa się względem punktu transform-origin (domyślnie środka).

Pochylenie 2D: skew(kątX, [kątY]), skewX(kątX), skewY(kątY)

skew(kątX, [kątY])

Podstawowa funkcja skew() przyjmuje jeden lub dwa kąty jako wartości:

• Jedna wartość skew(kątX): Pochyla element tylko w poziomie (wzdłuż osi X) o podany kąt kątX. Odpowiada to skewX(kątX).
• Dwie wartości skew(kątX, kątY): Pochyla element niezależnie w poziomie o kątX i w pionie (wzdłuż osi Y) o kątY.

Kąty podaje się w tych samych jednostkach co dla rotate() (deg, grad, rad, turn).

• kątX: Określa pochylenie wzdłuż osi X. Dodatni kąt pochyla górną krawędź w prawo, a dolną w lewo.
• kątY: Określa pochylenie wzdłuż osi Y. Dodatni kąt pochyla prawą krawędź w dół, a lewą w górę.

Przykład:

.element1 {
  /* Pochyl o 20 stopni w poziomie */
  transform: skew(20deg);
}

.element2 {
  /* Pochyl o 10 stopni w poziomie i -5 stopni w pionie */
  transform: skew(10deg, -5deg);
}
Kopiuj

skewX(kątX)

Ta funkcja pochyla element wyłącznie w poziomie (wzdłuż osi X) o podany kąt kątX.

.element {
  transform: skewX(-15deg); /* Pochyl górną krawędź w lewo */
}
Kopiuj

skewY(kątY)

Ta funkcja pochyla element wyłącznie w pionie (wzdłuż osi Y) o podany kąt kątY.

.element {
  transform: skewY(10deg); /* Pochyl prawą krawędź w dół */
}
Kopiuj

Używanie skewX i skewY jest często czytelniejsze, gdy chcemy pochylić element tylko w jednym kierunku.

Pochylenie a transform-origin

Właściwość transform-origin określa punkt, względem którego odbywa się pochylenie. Domyślnie jest to środek elementu (50% 50%). Zmiana tego punktu wpłynie na to, która część elementu pozostanie "nieruchoma" podczas pochylania.

Przykład:

.element-center {
  transform: skewX(20deg); /* Pochylenie względem środka */
}

.element-top-left {
  transform-origin: top left; /* Ustaw punkt na lewy górny róg */
  transform: skewX(20deg); /* Pochylenie względem lewego górnego rogu */
}
Kopiuj

W drugim przypadku lewy górny róg pozostanie w miejscu, a reszta elementu zostanie pochylona względem niego.

Zastosowania skew()

Funkcja skew() jest rzadziej używana niż translate, scale czy rotate, ale może być przydatna do tworzenia specyficznych efektów wizualnych:

• Tworzenie stylizowanych cieni lub perspektywy w sposób uproszczony.
• Nadawanie elementom dynamicznego, pochylonego wyglądu (np. przyciski, banery).
• Tworzenie niestandardowych kształtów i efektów w połączeniu z innymi transformacjami lub pseudoelementami.
• Symulowanie izometrycznego widoku w prostych grach lub interfejsach.