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 Hue Rotate 类。
示例
<!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>
