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

Результат:

Инчунин нигаред