CSS scale प्रकृति

निर्धारण और उपयोग

scale गुण आपको एलिमेंट के आकार को बदलने की अनुमति देता है।

scale गुण एलिमेंट के x और y दिशाओं में जगह के परिमाण मान को निर्धारित करता है।आप एलिमेंट के z दिशा में जगह के परिमाण को भी निर्धारित कर सकते हैं।

जगह के मान एक मान, दो मान या तीन मान हो सकते हैं।

  • यदि एक मान दिया गया है, तो एलिमेंट x और y दिशाओं में एक से एक जगह को बदला जाता है।
  • यदि दो मान दिए गए हैं, तो एलिमेंट x और y दिशाओं में निर्दिष्ट परिमाणों के अनुसार जगह को बदला जाता है।
  • यदि तीन मान दिए गए हैं, तो एलिमेंट x, y और z दिशाओं में निर्दिष्ट परिमाणों के अनुसार जगह को बदला जाता है।

बेहतर समझने के लिए scale गुण को देखेंडिमो।

ध्यान दें:जगह के बदलने के एक अन्य तकनीक यह है कि इसके साथ CSS स्केल() फ़ंक्शन के CSS transform गुण को कथित किया गया है।इस पृष्ठ पर व्याख्या किया गया CSS scale गुण एक अधिक सरल और सीधा तरीके से एलिमेंट को जगह के बदलने का एक तरीका है।

उदाहरण

उदाहरण 1

एलिमेंट के आकार को बदलना:

div {
  scale: 2;
}

अपने आप साबित करें

उदाहरण 2

जब scale गुण को दो मानों में सेट किया जाता है तो, x और y अक्ष पर आकार को सेट किया जाता है।यहाँ, एलिमेंट x अक्ष पर दोगुना आकार में होता है और y अक्ष पर आकार आधा होता है:

div {
  scale: 2 50%;
}

अपने आप साबित करें

CSS व्याकरण

scale: x-axis y-axis z-axis|initial|inherit;

गुण मान

मान वर्णन
x-axis

x अक्ष पर जगह की रेखांकन परिमाण निर्धारित करता है।संभावित मान:

  • नंबर
  • प्रतिशत
y-axis

y अक्ष पर जगह की रेखांकन परिमाण निर्धारित करता है।संभावित मान:

  • नंबर
  • प्रतिशत
z-axis

z अक्ष पर जगह की रेखांकन परिमाण निर्धारित करता है।संभावित मान:

  • नंबर
  • प्रतिशत
शुरूआती मान इस गुण को उसके मूलभूत मान पर सेट करें।देखें शुरूआती मान।
विरासत करना इस गुण को उसके पिता एलिमेंट से विरासत करें।देखें विरासत करना।

तकनीकी विवरण

मूलभूत मान: नहीं
विरासत करने की क्षमता: नहीं
एनिमेशन निर्माण: समर्थन किया गया है।देखें:एनिमेशन संबंधी गुण।
संस्करण: CSS3
जेसक्रिप्ट व्याकरण: object.style.scale="2 0.7"

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

च्रोम एज फायरफॉक्स सैफारी ऑपेरा
104 104 72 14.1 90

संबंधित पृष्ठ

ट्यूटोरियल:CSS 2D बदल

ट्यूटोरियल:CSS 3D ट्रांसफॉर्म

संदर्भ:CSS rotate प्रकृति

संदर्भ:CSS ट्रांसलेट प्रभाव