Funktsiya scale
Funktsiya scale elementni masshtablaydi:
uni bir necha marta kattalashtiradi yoki
kichiklashtiradi. Masshtablash transform-origin
xususiyati bilan belgilanadigan nuqta atrofida amalga oshiriladi.
Bitta yoki ikkita parametrni qabul qilishi mumkin, ular vergul orqali ajratiladi. Agar parametrlar ikkita bo'lsa - birinchi parametr gorizontal bo‘yicha masshtablashni belgilaydi, ikkinchisi esa - vertikal bo‘yicha. Agar parametr bitta bo‘lsa, u gorizontal va vertikal bo‘yicha bir vaqtning o‘zida masshtablashni belgilaydi.
Parametrlar qiymati butun yoki kasr son bo‘ladi.
Agar u 1 dan katta bo‘lsa - element kattalashadi,
agar kichik bo‘lsa (masalan, 0.5) - element
kichiklashadi. Agar 1 belgilansa - hech narsa o‘zgarmaydi
(bu standart qiymat hisoblanadi).
Sintaksis
selektor {
transform: scale(bitta yoki ikkita son);
}
Misol
Blokka sichqoncha olib borilganda masshtabni ikkala o‘q bo‘yicha 1.5
marta kattalashtiramiz:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Misol
Masshtabni ikkala o‘q bo‘yicha 2 marta kichiklashtiramiz:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Misol
Masshtabni X o‘qi bo‘yicha 2 marta kattalashtiramiz:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Misol
Masshtabni Y o‘qi bo‘yicha 2 marta kattalashtiramiz:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
: