Tidadigi Logo

CSS hue-rotate() Function

Hàm hue-rotate() là một hàm dựng sẵn dùng để áp dụng bộ lọc cho ảnh. Bộ lọc này thiết lập góc xoay màu sắc.

Cú pháp:

hue-rotate( angle )

Tham số: Hàm này chấp nhận một tham số duy nhất là angle. Tham số này giữ góc xoay màu sắc. Một góc dương làm tăng giá trị màu sắc, góc âm làm giảm giá trị màu sắc.

Ví dụ sau minh họa hàm hue-rotate() trong CSS:

Ví dụ:

html 
<!DOCTYPE html> 
<html> 

<head> 
    <title>CSS hue-rotate() Function</title> 
    
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
        .hue_rotate_effect {
            filter: hue-rotate(100deg);
        }
    </style>
</head> 

<body> 
    <h1>GeeksforGeeks</h1> 
    
    <h2>CSS hue-rotate() function</h2>
    
    <img class="hue_rotate_effect" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo"> 
</body> 

</html>

Đầu ra:

 css-hue-rotate-function 

Trình duyệt được hỗ trợ: Dưới đây là danh sách các trình duyệt hỗ trợ hàm hue-rotate().

  • Google Chrome 18
  • Edge 12
  • Firefox 35
  • Safari 6
  • Opera 15

Last Updated : 21/07/2025