Filtros
filter: hue-rotate()
Utilidades para aplicar filtros hue-rotate a un elemento.
| Clase | Estilos |
|---|---|
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>); |
Ejemplos
Ejemplo básico
Usa utilidades como hue-rotate-90 y hue-rotate-180 para rotar el matiz de un elemento en grados:
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" />Usando valores negativos
Usa utilidades como -hue-rotate-15 y -hue-rotate-45 para establecer un valor negativo de rotación de matiz:
-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" />Usando un valor personalizado
Usa la sintaxis hue-rotate-[<value>] para establecer el hue rotation basado en un valor completamente personalizado:
<img class="hue-rotate-[3.142rad] ..." src="/img/mountains.jpg" />Para variables CSS, también puedes usar la sintaxis hue-rotate-(<custom-property>) :
<img class="hue-rotate-(--my-hue-rotate) ..." src="/img/mountains.jpg" />Esto es solo un atajo para hue-rotate-[var(<custom-property>)] que agrega la función var() por ti automáticamente.
Responsive design
Prefija una utilidad filter: hue-rotate() con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<img class="hue-rotate-60 md:hue-rotate-0 ..." src="/img/mountains.jpg" />Aprende más sobre el uso de variantes en la documentación de variantes.