फ़ंक्शन scale

फ़ंक्शन scale तत्व को स्केल करता है: उसे कई गुना बढ़ाता या घटाता है। स्केलिंग उस बिंदु के चारों ओर किया जाता है, जो transform-origin गुण द्वारा निर्धारित किया जाता है।

यह एक या दो पैरामीटर ले सकता है, जो अल्पविराम से अलग करके सूचीबद्ध किए जाते हैं। यदि पैरामीटर दो हैं - पहला पैरामीटर क्षैतिज (horizontal) स्केलिंग निर्धारित करता है, और दूसरा - ऊर्ध्वाधर (vertical) स्केलिंग। यदि पैरामीटर एक है तो वह क्षैतिज और ऊर्ध्वाधर दोनों दिशाओं में एक साथ स्केलिंग निर्धारित करता है।

पैरामीटर्स का मान पूर्णांक या दशमलव संख्या होती है। यदि यह 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);
}

Результат:

यह भी देखें