फ़ंक्शन scaleX

फ़ंक्शन scaleX एक्स-अक्ष पर एलिमेंट को स्केल करता है। स्केलिंग transform-origin द्वारा निर्धारित बिंदु के चारों ओर की जाती है। फ़ंक्शन का मान एक पूर्णांक या दशमलव संख्या होती है। यदि यह 1 से अधिक है - तो एलिमेंट बढ़ जाता है, यदि कम है (उदाहरण के लिए, 0.5) - तो एलिमेंट छोटा हो जाता है। यदि 1 सेट किया जाता है - तो कुछ भी नहीं बदलता है (यह डिफ़ॉल्ट मान है)।

सिंटैक्स

cssसिलेक्टर {
  transform: scaleX(संख्या);
}

उदाहरण

ब्लॉक पर हॉवर करने पर एक्स-अक्ष पर स्केल को 1.5 गुना बढ़ाएंगे:

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

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

Результат:

उदाहरण

ब्लॉक पर हॉवर करने पर एक्स-अक्ष पर स्केल को 2 गुना कम करेंगे:

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

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

Результат:

यह भी देखें