Atrybut scale w CSS

Definicja i użycie

scale Atrybut pozwala zmieniać rozmiar elementu.

scale Atrybut definiuje wartości proporcji skalowania w kierunku X i Y. Możesz również zdefiniować proporcję skalowania w kierunku Z.

Wartości skalowania mogą być jedną, dwoma lub trzema wartościami.

  • Jeśli podano jedną wartość, proporcja skalowania w kierunku X i Y jest taka sama.
  • Jeśli podano dwie wartości, element jest skalowany w kierunku X i Y w podanych proporcjach.
  • Jeśli podano trzy wartości, element jest skalowany w kierunku X, Y i Z w podanych proporcjach.

Aby lepiej zrozumieć scale Atrybut, zobaczPokaz.

Uwaga:Innym technikią skalowania elementów jest użycie atrybutu z Funkcja scale() w CSS CSS transform właściwości. CSS, wyjaśnione na tej stronie scale Atrybut można powiedzieć, że jest bardziej prostym i bezpośrednim sposobem skalowania elementu.

Przykład

Przykład 1

Zmiana rozmiaru elementu:

div {
  scale: 2;
}

Spróbuj sam

Przykład 2

Gdy scale Gdy atrybut jest ustawiony na dwie wartości, rozmiar elementu jest ustawiany na osi X i Y. W tym przypadku, rozmiar elementu na osi X jest podwojony, a na osi Y podzielony na połowę:

div {
  scale: 2 50%;
}

Spróbuj sam

CSS Syntax

scale: x-axis y-axis z-axis|initial|inherit;

Wartość atrybutu

Wartość Opis
x-axis

Definiuje proporcję skalowania na osi X. Możliwe wartości:

  • Liczba
  • Procent
y-axis

Definiuje proporcję skalowania na osi Y. Możliwe wartości:

  • Liczba
  • Procent
z-axis

Definiuje proporcję skalowania na osi Z. Możliwe wartości:

  • Liczba
  • Procent
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Inhereduje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: none
Inheredność: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
JavaScript Syntax: object.style.scale="2 0.7"

Obsługa przeglądarek

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

Powiązane strony

教程：CSS 2D Transformacje

教程：Tutorial:

Transformacje 3D w CSSAtrybut rotate w CSS

Transformacje 3D w CSSAtrybut translate w CSS