このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

hue-rotate()”関数CSS3で追加

記事Jul.27th,2021
入力画像の色相を変更するCSSの関数、“hue-rotate()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

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)

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
hue-rotate()
定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク