filter: hue-rotate()

用于向元素应用色相旋转滤镜的实用工具。

类样式

hue-rotate-<数字>

filter: hue-rotate(<数字>deg);

-hue-rotate-<数字>

filter: hue-rotate(calc(<数字>deg * -1));

hue-rotate-(<自定义属性>)

filter: hue-rotate(var(<自定义属性>));

hue-rotate-[<值>]

filter: hue-rotate(<值>);

示例

使用类似 hue-rotate-90 和 hue-rotate-180 的实用工具，按度数旋转元素的色相

使用类似 -hue-rotate-15 和 -hue-rotate-45 的实用工具来设置负的色相旋转值

使用 色相旋转-[<值>] 语法来设置色相旋转基于完全自定义的值

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

对于 CSS 变量，您也可以使用 色相旋转-(<自定义属性>) 语法

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

这只是 色相旋转-[var(<自定义属性>)] 的简写，它会自动为您添加 var() 函数。

前缀使用 filter: hue-rotate() 实用工具与像 md: 这样的断点变体，以便仅在中等屏幕尺寸及以上应用该实用工具

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

在变体文档中了解有关使用变体的更多信息。