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

cssselektor {
  transform: scale(bitta yoki ikkita son);
}

Misol

Blokka sichqoncha olib borilganda masshtabni ikkala o‘q bo‘yicha 1.5 marta kattalashtiramiz:

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

css#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:

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

css#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:

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

css#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:

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

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

Результат:

Shuningdek qarang