Kurs HTML

Wprowadzenie do funkcji scale()

Funkcja scale() w CSS pozwala na **zmianę rozmiaru elementu**, czyli jego powiększenie lub pomniejszenie. Podobnie jak translate(), skalowanie odbywa się względem punktu transformacji (domyślnie środka elementu) i nie wpływa na otaczający layout.

Skalowanie może odbywać się w jednym, dwóch lub trzech wymiarach.

Skalowanie 2D: scale(sx, [sy]), scaleX(sx), scaleY(sy)

scale(sx, [sy])

Podstawowa funkcja scale() przyjmuje jedną lub dwie liczby jako wartości, które reprezentują **współczynniki skalowania**:

• Jedna wartość scale(s): Skaluje element równomiernie w obu kierunkach (X i Y) o podany współczynnik s. Odpowiada to scale(s, s).
• Dwie wartości scale(sx, sy): Skaluje element niezależnie w poziomie (o sx) i w pionie (o sy).

Interpretacja wartości:

• 1: Brak skalowania (rozmiar oryginalny).
• Wartość > 1: Powiększenie (np. 1.5 oznacza 150% rozmiaru).
• Wartość między 0 a 1: Pomniejszenie (np. 0.5 oznacza 50% rozmiaru).
• 0: Element staje się niewidoczny (skurczony do punktu).
• Wartość ujemna: Skalowanie z jednoczesnym odwróceniem/odbiciem lustrzanym względem punktu transformacji (np. -1 oznacza odbicie lustrzane bez zmiany rozmiaru).

Przykład:

.element1 {
  /* Powiększ dwukrotnie w obu kierunkach */
  transform: scale(2);
}

.element2 {
  /* Powiększ 1.5x w poziomie, pomniejsz do 50% w pionie */
  transform: scale(1.5, 0.5);
}

.element3 {
  /* Odbij lustrzanie w poziomie, zachowaj rozmiar w pionie */
  transform: scale(-1, 1);
}
Kopiuj

scaleX(sx)

Ta funkcja skaluje element wyłącznie w poziomie (wzdłuż osi X) o podany współczynnik sx.

.element {
  transform: scaleX(0.8); /* Pomniejsz do 80% szerokości */
}
Kopiuj

scaleY(sy)

Ta funkcja skaluje element wyłącznie w pionie (wzdłuż osi Y) o podany współczynnik sy.

.element {
  transform: scaleY(3); /* Powiększ trzykrotnie wysokość */
}
Kopiuj

Skalowanie 3D: scaleZ(sz), scale3d(sx, sy, sz)

Podobnie jak przy translateZ, aby skalowanie w osi Z było widoczne, potrzebny jest kontekst 3D (perspective na rodzicu lub w transformacji, transform-style: preserve-3d).

scaleZ(sz)

Skaluje element wzdłuż osi Z. Efekt ten jest mniej intuicyjny niż translateZ. Nie zmienia on wizualnie rozmiaru elementu w płaszczyźnie XY, ale wpływa na to, jak inne transformacje 3D (np. obroty) są stosowane oraz na obliczenia perspektywy. Rzadziej używane samodzielnie.

.parent {
  perspective: 500px;
  transform-style: preserve-3d;
}

.element {
  transform: scaleZ(2) rotateY(45deg); /* Skalowanie w Z wpłynie na efekt obrotu */
}
Kopiuj

scale3d(sx, sy, sz)

Funkcja skrócona do jednoczesnego skalowania we wszystkich trzech wymiarach: X, Y i Z.

.parent {
  perspective: 500px;
}

.element {
  /* Powiększ 1.2x w X, pomniejsz do 0.9 w Y, powiększ 1.5x w Z */
  transform: scale3d(1.2, 0.9, 1.5);
}
Kopiuj

Skalowanie a transform-origin

Punkt, względem którego odbywa się skalowanie, jest kontrolowany przez właściwość transform-origin. Domyślnie jest to środek elementu (50% 50%). Zmiana transform-origin może drastycznie zmienić efekt skalowania.

Przykład:

.element-center {
  transform: scale(1.5); /* Skaluje od środka */
}

.element-top-left {
  transform-origin: top left; /* Ustaw punkt na lewy górny róg */
  transform: scale(1.5); /* Skaluje od lewego górnego rogu */
}
Kopiuj

W drugim przypadku element będzie się rozszerzał w prawo i w dół, ponieważ lewy górny róg pozostanie w miejscu.