Jul.27th,2021
＃
“hue-rotate()”関数
“hue-rotate()”関数は入力画像の色相を変更するための関数です。
“<filter-function>”値として使用することができ、“filter”プロパティで要素の色相を変更することができます。
引数は1個の“<angle>”値です。角度が“0”である場合は単位が省略できます。
hue-rotate(〚“<angle>”値〛)
引数は色相を回転させる角度を表し、“0deg”は入力画像と同じ画像、“180deg”で色相を反転させた画像を出力します。負の値や“360deg”より大きい引数も有効です。
省略時の既定値は“0deg”です。また、補間時の初期値は“0deg”です。
＃
使用例
.filter-0 { filter: hue-rotate(0deg);}
.filter-3 { filter: hue-rotate(30deg);}
.filter-6 { filter: hue-rotate(60deg);}
.filter-9 { filter: hue-rotate(90deg);}
.filter-12 { filter: hue-rotate(120deg);}
.filter-15 { filter: hue-rotate(150deg);}
.filter-18 { filter: hue-rotate(180deg);}
.filter-21 { filter: hue-rotate(210deg);}
.filter-24 { filter: hue-rotate(240deg);}
.filter-27 { filter: hue-rotate(270deg);}
.filter-30 { filter: hue-rotate(300deg);}
.filter-33 { filter: hue-rotate(330deg);}
hue-rotate(0deg)
hue-rotate(30deg)
hue-rotate(60deg)
hue-rotate(90deg)
hue-rotate(120deg)
hue-rotate(150deg)
hue-rotate(180deg)
hue-rotate(210deg)
hue-rotate(240deg)
hue-rotate(270deg)
hue-rotate(300deg)
hue-rotate(330deg)
＃
