फिल्टर ह्यू-रोटेट
CSS3 में इमेज पर ह्यू रोटेशन लागू करने के लिए, filter प्रॉपर्टी के लिए hue-rotate() मान का उपयोग करें।
सिंटैक्स:
filter: hue-rotate(angle);
पैरामीटर:
- angle: रंग चक्र पर घुमाव कोण (deg, rad, grad, turn)
- 0deg: कोई परिवर्तन नहीं (डिफ़ॉल्ट)
- 360deg / 1turn: पूरा चक्र = मूल रंग
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: hue-rotate(45deg);
}
</style>
</head>
<body>
<h1>Spring Framework सीखें</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Spring Framework सीखें</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
आउटपुट
दूसरी इमेज के रंग 45 डिग्री घुमाए जाएंगे - लाल नारंगी हो जाएगा, हरा सियान की ओर, नीला बैंगनी की ओर।
ह्यू रोटेशन कैसे काम करता है:
HSL रंग चक्र पर प्रत्येक पिक्सेल के ह्यू मान को निर्दिष्ट कोण द्वारा घुमाता है:
- 0° = मूल रंग
- 60° = पीला → हरा
- 120° = लाल → सियान
- 180° = रंग पूरक (कॉम्प्लीमेंटरी)
- 360° = मूल पर वापस
एनिमेशन उदाहरण:
@keyframes hue-cycle {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}
img.animated {
animation: hue-cycle 10s linear infinite;
}
अन्य फिल्टर्स के साथ संयोजन:
img.artistic {
filter: hue-rotate(90deg) saturate(150%) contrast(110%);
}
उपयोग के मामले:
- कलात्मक फोटो इफेक्ट्स
- थीम कलर वेरिएशन्स (एक इमेज से कई रंग)
- होवर/फोकस स्टेट्स के लिए डायनामिक रंग बदलाव
- डेटा विज़ुअलाइज़ेशन में रंग कोडिंग
ब्राउज़र सपोर्ट:
सभी आधुनिक ब्राउज़र्स। IE में सपोर्ट नहीं।
