CSS の hue-rotate()
関数は、要素およびその中身のコンテンツの色相環を回転します。結果は <filter-function>
です。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
hue-rotate(angle)
引数
angle
- 入力サンプルの色相の相対的な変化量を、
<angle>
で指定します。0deg
は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は0
です。最小値又は最大値はなく、hue-rotate(Ndeg)
はN
を 360 で割った余りと等価です。
例
hue-rotate(-90deg) /* 270度の回転と同じ */ hue-rotate(0deg) /* 効果なし */ hue-rotate(90deg) /* 90度の回転 */ hue-rotate(.5turn) /* 180度の回転 */ hue-rotate(405deg) /* 45度の回転と同じ */