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);
}

Результат:

උදාහරණය

X අක්ෂය දිගේ පරිමාණය 2 ආකාරයෙන් වැඩි කරමු:

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

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

Результат:

උදාහරණය

Y අක්ෂය දිගේ පරිමාණය 2 ආකාරයෙන් වැඩි කරමු:

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

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

Результат:

මෙයද බලන්න