skew() फंक्शन
skew() फंक्शन का उपयोग 2D प्लेन में किसी एलिमेंट को तिरछा (skew) करने के लिए किया जाता है। skew() फंक्शन के पैरामीटर के रूप में तिरछेपन की मात्रा सेट करें।
सिंटैक्स:
transform: skew(ax, ay);
- ax: X-अक्ष के साथ तिरछापन कोण (डिग्री, ग्रेड, रेडियन, टर्न)
- ay: Y-अक्ष के साथ तिरछापन कोण (वैकल्पिक, डिफ़ॉल्ट 0)
उदाहरण 1: डिग्री में skew
<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
transform: translate(50px, 10%);
}
.skew_img {
transform-origin: top left;
transform: skew(45deg, 0);
}
</style>
</head>
<body>
<h1>सीखें</h1>
<img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
आउटपुट
दूसरी इमेज (Apache Spark) X-अक्ष पर 45 डिग्री तिरछी होगी, मूल बिंदु शीर्ष-बाएं कोना है।
उदाहरण 2: विभिन्न यूनिट्स के साथ skew
<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
transform: translate(50px, 10%);
}
.skew_img {
transform-origin: top left;
transform: skew(-0.06turn, 18deg);
}
</style>
</head>
<body>
<h1>सीखें</h1>
<img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
आउटपुट
X-अक्ष पर -0.06 टर्न (-21.6 डिग्री) और Y-अक्ष पर 18 डिग्री तिरछापन।
transform-origin का महत्व:
transform-origin: top left तिरछापन के लिए मूल बिंदु सेट करता है। डिफ़ॉल्ट केंद्र होता है।
skewX() और skewY() फंक्शन्स:
transform: skewX(30deg); /* केवल X-अक्ष */ transform: skewY(15deg); /* केवल Y-अक्ष */
उपयोग के मामले:
- इटैलिक/तिरछा टेक्स्ट इफेक्ट्स (फॉन्ट के बिना)
- डायनामिक ज्यामितीय आकार बनाना
- होवर एनिमेशन्स और ट्रांजीशन्स
- आइसोमेट्रिक/3D-लुक डिज़ाइन्स
नोट:
Skew एलिमेंट के कंटेंट को भी तिरछा कर देता है। टेक्स्ट पढ़ने में कठिन हो सकता है। केवल डेकोरेटिव एलिमेंट्स या छोटे टेक्स्ट के लिए उपयोग करें।
