Функция scale
Функция scale элементни масштаблайди:
уни бир неча баробар катталаштиради ёки
кичрайтиради. Масштаблаш transform-origin
хусусияти билан белгиланадиган нуқта атрофида амалга оширилади.
Битта ёки иккита параметрни қабул қилиши мумкин, улар вергул билан ажратилади. Агар параметрлар иккита бўлса - биринчи параметр горизонтал бўйича масштаблашни белгилайди, иккинчиси эса вертикал бўйича. Агар параметр битта бўлса, у горизонтал ва вертикал бўйича бир вақтда масштаблашни белгилайди.
Параметрларнинг қиймати бутун ёки каср
сон бўлиши мумкин. Агар у 1 дан катта бўлса - элемент катталашади,
агар кичик бўлса (масалан, 0.5) - элемент
кичрайди. Агар 1 ни белгилангиз - ҳеч нарса ўзгармайди
(бу айнан бошланғич қийматдир).
Синтаксис
селектор {
transform: scale(битта ёки иккита сон);
}
Мисол
Блокка курсорни олиб борилганда, масштабни 1.5
баробарга икки ўқ бўйича катталаштирамиз:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Мисол
Масштабни 2 баробарга икки ўқ бўйича кичрайтирамиз:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Мисол
Масштабни 2 баробарга X ўқи бўйича катталаштирамиз:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Мисол
Масштабни 2 баробарга Y ўқи бўйича катталаштирамиз:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
