scale3d() फंक्शन
scale3d() फंक्शन का उपयोग 3D स्पेस में किसी एलिमेंट को स्केल करने के लिए किया जाता है। एलिमेंट को पैरामीटर के रूप में सेट किए गए नंबरों के आधार पर स्केल किया जाता है।
सिंटैक्स
transform: scale3d(sx, sy, sz);
जहाँ:
- sx: X-अक्ष (चौड़ाई) के लिए स्केल फैक्टर
- sy: Y-अक्ष (ऊंचाई) के लिए स्केल फैक्टर
- sz: Z-अक्ष (गहराई) के लिए स्केल फैक्टर
उदाहरण 1
एक इमेज को 3D में स्केल करना:
<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
transform: scale3d(0.5, 1, 1.7);
}
</style>
</head>
<body>
<h1>सीखें</h1>
<p>Apache Spark सीखें</p>
<img class="scale3d_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
आउटपुट
इमेज X-अक्ष पर 0.5 गुना (आधी चौड़ाई), Y-अक्ष पर 1 गुना (मूल ऊंचाई), और Z-अक्ष पर 1.7 गुना स्केल होगी।
उदाहरण 2
नकारात्मक मानों के साथ स्केलिंग (फ्लिप इफेक्ट के लिए):
<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
transform: scale3d(-1.4, 0.4, 0.7);
}
</style>
</head>
<body>
<h1>सीखें</h1>
<p>Apache Spark सीखें</p>
<img class="scale3d_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
आउटपुट
X-अक्ष पर -1.4 मान इमेज को क्षैतिज रूप से फ्लिप (मिरर) करेगा और 1.4 गुना चौड़ा करेगा।
महत्वपूर्ण बिंदु:
- मान 1 का अर्थ है मूल आकार
- 1 से अधिक मान एलिमेंट को बड़ा करते हैं
- 0 और 1 के बीच मान एलिमेंट को छोटा करते हैं
- नकारात्मक मान फ्लिप/मिरर इफेक्ट बनाते हैं
- Z-अक्ष स्केलिंग आमतौर पर 3D ट्रांसफॉर्म कॉन्टेक्स्ट में दिखाई देती है
