Kazi scale

Kazi scale inapanua kipengele: ikikizwa au kupunguzwa kwa mara kadhaa. Upana unafanywa kuzunguka hatua, iliyowekwa na sifa transform-origin.

Inaweza kukubali kigezo kimoja au viwili, vinavyotajwa kwa kutumia koma. Ikiwa viashiria ni viwili - kigezo cha kwanza huweka upana usioongezeka, na cha pili - wima. Ikiwa kigezo kimoja basi huweka upana usioongezeka na wima wakati huo huo.

Thamani ya viashiria ni nambari kamili au sehemu. Ikiwa ni kubwa kuliko 1 - kipengele kinakuzwa, ikiwa ni ndogo (kwa mfano, 0.5) - kipengele kinapungua. Ikiwa utaweka 1 - hakuna kitakachobadilika (hii ndiyo thamani chaguomsingi).

Kiufundi

csskichaguzi {
  transform: scale(nambari moja au mbili);
}

Mfano

Kwa kuweka kielekezo kwenye kipande kuongeza kiwango cha 1.5 mara kwenye mihuri yote miwili:

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

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

Результат:

Mfano

Punguza kiwango kwa 2 mara kwenye mihuri yote miwili:

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

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

Результат:

Mfano

Kuongeza kiwango cha 2 mara kwenye mhimili X:

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

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

Результат:

Mfano

Kuongeza kiwango cha 2 mara kwenye mhimili Y:

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

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

Результат:

Angalia pia