Tailwind CSS - 色相旋轉

Tailwind CSS 色相旋轉 是一個實用程式類，用於將色相旋轉濾鏡應用於元素。

Tailwind CSS 色相旋轉類

以下是用於有效應用色相旋轉濾鏡的 Tailwind CSS 色相旋轉 類的列表。

類	CSS 屬性
hue-rotate-0	filter: hue-rotate(0deg);
hue-rotate-15	filter: hue-rotate(15deg);
hue-rotate-30	filter: hue-rotate(30deg);
hue-rotate-60	filter: hue-rotate(60deg);
hue-rotate-90	filter: hue-rotate(90deg);
hue-rotate-180	filter: hue-rotate(180deg);

Tailwind CSS 色相旋轉類的功能

hue-rotate-0: 此類用於從元素中刪除色相旋轉濾鏡。
hue-rotate-15: 此類用於將元素的色相旋轉 15 度。
hue-rotate-30: 此類用於將元素的色相旋轉 30 度。
hue-rotate-60: 此類用於將元素的色相旋轉 60 度。
hue-rotate-90: 此類用於將元素的色相旋轉 90 度。
hue-rotate-180: 此類用於將元素的色相旋轉 180 度。

Tailwind CSS 色相旋轉類示例

以下示例將說明 Tailwind CSS 色相旋轉類的不同可見性和實用程式。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Hue Rotate Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">hue-rotate-0</h3>
            <img class="hue-rotate-0 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">hue-rotate-15</h3>
            <img class="hue-rotate-15 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">hue-rotate-30</h3>
            <img class="hue-rotate-30 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">hue-rotate-60</h3>
            <img class="hue-rotate-60 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">hue-rotate-90</h3>
            <img class="hue-rotate-90 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">hue-rotate-180</h3>
            <img class="hue-rotate-180 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>

</html>

列印頁面