filter: hue-rotate()

Утилиты для применения фильтров поворота оттенка к элементу.

Class Styles

Class	Styles
`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>);`

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>);

Примеры

Базовый пример

Используйте утилиты типа hue-rotate-90 и hue-rotate-180 для поворота оттенка элемента на градусы:

Использование отрицательных значений

Используйте утилиты типа -hue-rotate-15 и -hue-rotate-45 для установки отрицательного значения поворота оттенка:

Использование пользовательского значения

Используйте синтаксис hue-rotate-[<value>] , чтобы задать hue rotation на основе полностью пользовательского значения:

<img class="hue-rotate-[3.142rad] ..." src="/img/mountains.jpg" />

Для переменных CSS вы также можете использовать синтаксис: hue-rotate-(<custom-property>)

<img class="hue-rotate-(--my-hue-rotate) ..." src="/img/mountains.jpg" />

Это просто сокращение, hue-rotate-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a filter: hue-rotate() утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<img class="hue-rotate-60 md:hue-rotate-0 ..." src="/img/mountains.jpg" />

Подробнее об использовании вариантов читайте в документации по вариантам.