filter: hue-rotate()
En esta página
| Clase | Propiedades CSS |
|---|---|
hue-rotate-<number> |
filter: hue-rotate(<number>deg); |
-hue-rotate-<number> |
filter: hue-rotate(calc(<number>deg * -1)); |
hue-rotate-(<custom-property>) |
filter: hue-rotate(var(<custom-property>)); |
hue-rotate-[<value>] |
filter: hue-rotate(<value>); |
Examples#
Basic example#
Use utilities like hue-rotate-90 and hue-rotate-180 to rotate the hue of an element by degrees:
{
hue-rotate-15
hue-rotate-90
hue-rotate-180
hue-rotate-270
<!-- [!code classes:hue-rotate-15,hue-rotate-90,hue-rotate-180,hue-rotate-270] -->
<img class="hue-rotate-15" src="/img/mountains.jpg" />
<img class="hue-rotate-90" src="/img/mountains.jpg" />
<img class="hue-rotate-180" src="/img/mountains.jpg" />
<img class="hue-rotate-270" src="/img/mountains.jpg" />
Using negative values#
Use utilities like -hue-rotate-15 and -hue-rotate-45 to set a negative hue rotate value:
{
-hue-rotate-15
-hue-rotate-45
-hue-rotate-90
<!-- [!code classes:-hue-rotate-15,-hue-rotate-45,-hue-rotate-90] -->
<img class="-hue-rotate-15" src="/img/mountains.jpg" />
<img class="-hue-rotate-45" src="/img/mountains.jpg" />
<img class="-hue-rotate-90" src="/img/mountains.jpg" />