Fonction hue-rotate() CSS

Définition et utilisation

CSS hue-rotate() La fonction de filtre applique une rotation de couleur aux éléments.

Instance

Exemple 1

Définir différentes rotations de couleur pour les images :

#img1 {
  filter: hue-rotate(200deg);
}
#img2 {
  filter: hue-rotate(90deg);
}
#img3 {
  filter: hue-rotate(-90deg);
}

Essayer vous-même

Exemple 2

permet de hue-rotate() et backdrop-filter Utilisation combinée des attributs :

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: hue-rotate(90deg);
  backdrop-filter: hue-rotate(90deg);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Essayer vous-même

Syntaxe CSS

hue-rotate(angle)
Valeur Description
angle

Optionnel. Spécifiez un angle pour représenter la variation relative de la teinte de l'échantillon d'entrée.

Les valeurs positives augmentent les valeurs de teinte, et les valeurs négatives diminuent les valeurs de teinte.

0deg représente l'image originale (sans effet).

La valeur par défaut est 0.

Détails techniques

Version : Module de l'effet de filtre CSS niveau 1

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Page connexe

Référence :Attribut filter CSS

Référence :Fonction CSS blur()

Référence :Fonction CSS brightness()

Référence :Fonction CSS contrast()

Référence :Fonction CSS drop-shadow()

Référence :Fonction CSS grayscale()

Référence :Fonction CSS invert()

Référence :Fonction opacity() CSS

Référence :Fonction saturate() CSS

Référence :Fonction sepia() CSS