hue-rotate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

hue-rotate() は CSS の関数で、要素およびその中身のコンテンツの色相環を回転させます。結果は <filter-function> です。

試してみましょう

構文

css
hue-rotate(angle)

引数

angle

入力サンプルの色相の相対的な変化量を、 <angle> で指定します。 0deg は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は 0 です。最小値または最大値はなく、 hue-rotate(Ndeg) は N を 360 で割った余りと等価です。

例

hue-rotate の正しい値の例

css
hue-rotate(-90deg)  /* 270 度の回転と同じ */
hue-rotate(0deg)    /* 効果なし */
hue-rotate(90deg)   /* 90 度の回転 */
hue-rotate(.5turn)  /* 180 度の回転 */
hue-rotate(405deg)  /* 45 度の回転と同じ */

仕様書

Specification
Filter Effects Module Level 1
# funcdef-filter-hue-rotate

ブラウザーの互換性

BCD tables only load in the browser

関連情報