hue-rotate() メソッド
hue-rotate() メソッドは、色相環に関する引数の値から該当するその色値を返す CSS 関数です。引数の値は角度（ deg ）です。
色の三属性（色相・明度・彩度）に関するメソッドで、色相環を利用して色を変化させるために利用されます。
0 または 0deg は変化はありません。90deg で９０度位相の色。180deg で色相環で反対色になります。
.content {
filter: hue-rotate( 180deg );
}
詳しくは Example を参照してください
hue-rotate() メソッドは、filter や backdrop-filter プロパティといった <filter-value-list> を使用するプロパティで利用します。
ページ内 Index
構文(Syntax)
CSS
hue-rotate( angle )
引数
引数の単位は、角度を示す deg や回転を示す turn です。0 がデフォルト値で、0deg と同じです。
Example
hue-rotate() メソッドの例です。backdrop-filter プロパティで hue-rotate() メソッドを使用しています。
backdrop-filter プロパティは子エレメントで使用します。 backdrop-filter プロパティは、子エレメントの後ろにある内容に影響があることが分かります。
ここでは、親エレメントにテキストと背景画像の設定があります。子エレメントの位置を調整して親エレメントのテキストと背景がどのように表示されるかを試しています。
関連するプロパティとメソッド
hue-rotate() メソッドに関するプロパティとメソッドには以下のものがあります。
| 名称 | 概要 |
|---|---|
| プロパティ | |
| filter | エレメントに対して視覚効果（ぼかし、彩度、影付きなど）を指定するプロパティ |
| backdrop-filter | エレメントの後ろの表示に「ぼかしや色相、コントラス卜」などの効果がある |
| メソッド | |
| blur(px) | ぼかし半径。値が大きいほどにぼやかしが大きくなる |
| brightness(%) | 明るさ調整。100%がdefault。 |
| contrast(%) | コントラスト調整。100%がdefault。 |
| drop-shadow(h-shadow v-shadow blur spread color) | エレメントに影を加えることができる。box-shadowプロパティと同じ値設定。 |
| grayscale(%) | グレイスケールに加工。0%がdefault。100%で完全な白黒表現。 |
| hue-rotate(deg) | 色相を調整（反対色）。0degでdeafult。360degで反対色。 |
| invert(%) | ネガポジ反転。0%がdefault。100%で完全な反転色。 |
| opacity(%) | 透過度を調整。100%がdefault。0%で見えなくなる。opacityプロパティと同じ値設定。 |
| saturate(%) | 色の濃さをあらわす彩度。100%がdefault。0%で見えなくなる。 |
| sepia(%) | セピア加工。0%がdefault。100%で完全なセピア色。 |
| url(URL) | SVGフィルターが設定されたXMLファイルを取得。 |