Funkcja CSS scaleX()

Definicja i użycie

CSS scaleX() Funkcja używana do poziomego skalowania elementów.

scaleX() funkcja zwiększa lub zmniejsza szerokość elementu.

scaleX() Funkcja w transform używane w atrybutach.

Przykład

Przykład 1

Użyj scaleX() Rozszerzenie szerokości wielu elementów <div>:

#myDiv1 {
  transform: scaleX(0.7);
}
#myDiv2 {
  transform: scaleX(90%);
}
#myDiv3 {
  transform: scaleX(1.1);
}

Spróbuj sam

Przykład 2

Użyj scaleX() Rozszerzenie szerokości obrazu:

#img1 {
  transform: scaleX(0.6);
}
#img2 {
  transform: scaleX(90%);
}
#img3 {
  transform: scaleX(-0.6);
}
#img4 {
  transform: scaleX(1.1);
}

Spróbuj sam

Gramatyka CSS

scaleX(s)
Wartość Opis
s Wymagane. Numer określający skalę wektora szerokości.

Szczegóły techniczne

Wersja: Moduł Transformacji CSS poziom 1

Obsługa przeglądarek

Liczby w tabeli oznaczają wersję przeglądarki, która w pełni obsługuje tę funkcję.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Strony powiązane

Tutorial:Przekształcenia 2D w CSS

Odniesienie:Atrybut transform w CSS

Odniesienie:Atrybut scale w CSS

Odniesienie:Funkcja scale() w CSS

Odniesienie:Funkcja scale3d() w CSS

Odniesienie:Funkcja scaleY() w CSS