hue-rotate()
hue-rotate()
は CSS の関数で、要素およびその中身のコンテンツの色相環を回転します。結果は <filter-function>
です。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
構文
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度の回転と同じ */