CSS3 scale() फ़ंक्शन

CSS में scale() फ़ंक्शन का उपयोग 2D तल पर किसी तत्व का आकार बदलने वाले ट्रांसफॉर्मेशन को परिभाषित करने के लिए किया जाता है। स्केलिंग की मात्रा को प्रत्येक दिशा में scale() फ़ंक्शन के पैरामीटर के रूप में सेट करें।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .translate_img { transform: translate(100px, 10%); } 
      .scale_img { transform: scale(1.2); background-color: yellow; } 
    </style> 
  </head> 
  <body> 
    <h1>सीखें</h1> 
    <img class="translate_img" src="https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png" alt="MongoDB"> 
    <img class="scale_img" src="https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png" alt="MongoDB"> 
  </body> 
</html>

आउटपुट

एक और उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .translate_img { transform: translate(100px, 10%); } 
      .scale_img { transform: scale(0.3); } 
    </style> 
  </head> 
  <body> 
    <h1>सीखें</h1> 
    <img class="translate_img" src="https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png" alt="MongoDB"> 
    <img class="scale_img" src="https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png" alt="MongoDB"> 
  </body> 
</html>

आउटपुट

व्याख्या: scale(1.2) तत्व को 120% (X और Y दोनों) बड़ा करता है। scale(0.3) 30% छोटा करता है। scale(sx, sy) X और Y के लिए अलग-अलग स्केलिंग अनुमति देता है। scale3d() 3D स्केलिंग के लिए है। ट्रांसफॉर्म ओरिजिन डिफ़ॉल्ट केंद्र है।