Właściwość CSSTransformacje
scale
Powiększa lub pomniejsza element, niezależnie od właściwości transform.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, jako liczba
- Dotyczy
- elementy transformowalne
- JavaScript
element.style.scale = "1.1"
Przykład
#CSS
.button {
transition: scale 0.15s;
}
.button:active {
scale: 0.95;
}HTML przykładu
<style>.press { transition: scale .15s; } .press:active { scale: 0.95; }</style>
<button class="press" type="button" style="padding: 10px 18px; border-radius: 10px;">Przytrzymaj mnie</button>Podgląd
Definicja i zastosowanie
#Właściwość scale zmienia wizualny rozmiar elementu. Wartość 1 to rozmiar naturalny, 2 to podwojenie, a 0.5 to połowa. Dwie wartości skalują osobno w poziomie i w pionie.
Skalowanie nie zmienia układu strony, więc powiększony element nachodzi na sąsiadów zamiast ich rozpychać. To dokładnie to, czego zwykle chcesz przy efektach najechania.
Wartość ujemna tworzy odbicie lustrzane: scale: -1 1 odwraca element w poziomie.
Składnia
#Składnia
scale: none | <liczba> <liczba>? <liczba>?;Wartości
#Wartości w praktyce
#none
Naturalny rozmiar.
.demo { scale: none; }1.4
Powiększenie o 40% w obu osiach.
.demo { scale: 1.4; }0.6
Pomniejszenie do 60%.
.demo { scale: 0.6; }1.6 0.8
Rozciągnięcie w poziomie, ściśnięcie w pionie.
.demo { scale: 1.6 0.8; }-1 1
Lustrzane odbicie w poziomie.
.demo { scale: -1 1; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Lekkie zmniejszenie przycisku w stanie
:active(0.95–0.98) daje przyjemne wrażenie wciśnięcia. - Tekst w powiększonym elemencie może się rozmywać. Do dużych zmian rozmiaru lepiej zmienić prawdziwe wymiary.
Powiązane hasła
#- transformPrzesuwa, obraca, skaluje lub pochyla element bez wpływu na układ strony.
- transform-originUstawia punkt, wokół którego element się obraca i względem którego się skaluje.
- rotateObraca element o podany kąt, niezależnie od właściwości transform.
- translatePrzesuwa element w poziomie, pionie lub w głąb, niezależnie od właściwości transform.
Widzisz błąd albo brakuje przykładu? Napisz do nas.