Функция scale

scale функциясы элементи масштабдайт: аны бир нече жолу чоңойтот же кичирейтет. Масштабдоо transform-origin касиети менен аныкталган чекиттин айланасында жүргүзүлөт.

Ал бир же эки параметрди кабыл ала алат, алар үтүр менен бөлүнөт. Эгерде параметрлер эки болсо - биринчи параметр горизонталь боюнча масштабдоону, экинчиси - тик боюнча масштабдоону аныктайт. Эгерде параметр бир болсо анда ал горизонталь жана тик боюнча масштабдоону бир мезгилде аныктайт.

Параметрлердин мааниси бүтүн же бөлчөк сан болуп саналат. Эгерде ал 1 ден чоң болсо - элемент чоңойот, эгерде кичине болсо (мисалы, 0.5) - элемент кичирейет. Эгерде 1 деп белгиленсе - эч нерсе өзгөрбөйт (бул байкоосуз мааниси).

Синтаксис

cssселектор {
  transform: scale(бир же эки сан);
}

Мисал

Блокко курсорду алып барганда масштабды 1.5 жолу эки огу боюнча көбөйтөлү:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1.5);
}

Результат:

Мисал

Масштабды 2 жолу эки огу боюнча кичирейтели:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(0.5);
}

Результат:

Мисал

Масштабды 2 жолу X огу боюнча көбөйтөлү:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(2, 1);
}

Результат:

Мисал

Масштабды 2 жолу Y огу боюнча көбөйтөлү:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1, 2);
}

Результат:

Дагы караңыз