home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การหมุนสีภาพด้วย CSS3 (Hue Rotate Filter)

เพื่อหมุนสี (hue rotation) ในภาพด้วย CSS3 ให้ใช้ค่า hue-rotate() สำหรับคุณสมบัติ filter

ตัวอย่าง: hue-rotate 45 องศา

<!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>

ผลลัพธ์

การหมุนสีภาพด้วย CSS3 (Hue Rotate Filter)

ไวยากรณ์ (Syntax)

filter: hue-rotate(angle);

ค่าตัวอย่าง

filter: hue-rotate(0deg);    /* ไม่เปลี่ยนสี */
filter: hue-rotate(90deg);   /* หมุน 90 องศา */
filter: hue-rotate(180deg);  /* หมุน 180 องศา (สีตรงข้าม) */
filter: hue-rotate(360deg);  /* กลับสู่สีเดิม */
filter: hue-rotate(-45deg);  /* หมุนทวนเข็มนาฬิกา */

หลักการทำงาน

Hue rotation เปลี่ยนสีพื้นฐาน (Hue) ในโมเดล HSL โดยยังคงค่าความอิ่มตัว (Saturation) และความสว่าง (Lightness) คงที่ เหมือนการหมุนวงล้อสี (color wheel)

การประยุกต์ใช้

  • สร้างเอฟเฟกต์สีสันหลากหลายจากภาพเดียว
  • แอนิเมชันสีเปลี่ยนไปมา
  • ธีมสี dark/light mode
  • hover effect สำหรับรูปภาพ

หมายเหตุ: ใช้หน่วย deg, grad, rad, turn ได้ทั้งหมด