CSS3-এ ইমেজে হিউ রোটেশন প্রয়োগের জন্য filter প্রপার্টির hue-rotate() ফাংশন ব্যবহার করুন। এটি ইমেজের সকল রঙকে রঙ চক্র (color wheel) অনুযায়ী ঘুরিয়ে দেয়।
উদাহরণ: ৪৫ ডিগ্রি হিউ রোটেশন
<!DOCTYPE html> <html> <head> <style> img.demo { filter: hue-rotate(45deg); } </style> </head> <body> <h1>Learn Spring Framework</h1> <img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150"> <h1>Learn 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>
আউটপুট
প্যারামিটার
- angle: ডিগ্রি (deg), রেডিয়ান (rad), গ্রেড (grad), টার্ন (turn) একক গ্রহণ করে
- ০deg: কোনো পরিবর্তন নেই
- ৩৬০deg: পুরো চক্র, মূল রঙে ফিরে যায়
ব্যবহার ক্ষেত্র: ক্রিয়েটিভ ইমেজ ইফেক্ট, থিম রঙ পরিবর্তন, হোভার এনিমেশন।
নোট: এটি শুধু রঙের হিউ (hue) পরিবর্তন করে, স্যাচুরেশন বা লাইটনেস পরিবর্তন করে না। একাধিক ফিল্টার কম্বাইন করতে: filter: hue-rotate(90deg) saturate(200%);
