hue-rotate() - Fonction CSS
Résumé des caractéristiques de la fonction hue-rotate()
Description de la fonction hue-rotate()
.
La fonction hue-rotate()
provoque un changement des couleurs d'un élément.
Chacune des teintes sera décalée d'un certain angle sur la roue des couleurs.
En observant le schéma ci-dessous, vous voyez qu'un décalage de 90° transforme le rouge en vert, le vert en cyan, le bleu en violet, etc.
La fonction hue-rotate() peut être utilisée avec :
backdrop-filter
: Applique un filtre graphique sur l'élément situé en arrière plan.filter
: Applique un filtre graphique (flou, contraste...) à un élément.
Syntaxe de la fonction hue-rotate()
.
- filter: hue-rotate(45deg); a
hue-rotate()
attend un seul paramètre :a
est une valeur positive ou négative, suivie d'une unité angulaire (voir les unités CSS d'angle). Bien que la syntaxe n'impose pas de limites inférieure et supérieure, la logique veut quea
soit compris entre-360deg
et360deg
.
a
indique l'angle de rotation sur la roue des couleurs. Il est possible également de spécifiera
en fraction de tours avec l'unitéturn
. Par exemple0.25turn
correspond à 90° (un quart de tour).Exemples d'équivalences entre les unités d'angle :
180deg = 200grad = 3.14rad = 0.5turn
-270deg = 90deg = 100grad = 1.57rad = 0.25turn
Si aucune valeur n'est précisée dans les parenthèses, la fonction ne provoque pas de changement de teinte (valeur par défaut = 0).
Simulateur.
Vous noterez que le changement de teinte n'a aucun effet sur le blanc. En effet quand la luminosité est au maximum, on obtient du blanc et la teinte n'a plus d'importance. Sur du noir le changement de teinte n'aurait également aucun effet.
Prise en charge par les navigateurs (compatibilité).
Comme toutes les autres fonctions de filtre, hue-rotate()
est bien reconnue par les navigateurs actuels.
hue-rotate()
.
hue-rotate()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que hue-rotate()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. hue-rotate()
fait partie du Module filtres et effets (Filter Effects Module). Les définitions suivantes sont également décrites dans ce même module.