Функция 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);
}
:
