CSS
HTML
COMPONENTS
CODE HUB
Generador de Rotación de Matiz CSS
Configuración
Hue-Rotate
Clase
Vista previa
Código
Aprende a programar con Lara
Domina los conceptos de programación paso a paso con tu tutora de IA interactiva. Lara explica lógicas complejas, revisa tus ejercicios prácticos y te ayuda a construir una base sólida en el desarrollo de software.
Lecciones de programación interactivas adaptadas a tu propio ritmo.
Empezar a aprender con LaraGenerador de Rotación de Matiz CSS
En CSS, puedes aplicar el efecto de rotación de matiz utilizando la propiedad filter. El efecto de rotación de matiz permite desplazar los colores de un elemento a lo largo de la rueda de colores, resultando en un cambio de matiz mientras se mantienen los mismos valores de saturación y luminosidad. Es una forma de crear variaciones de color interesantes o animaciones en tus diseños web.
Aquí te mostramos cómo usar el efecto de rotación de matiz en CSS:
.hue-rotate-element {
filter: hue-rotate(90deg);
}
En este ejemplo:
- La clase .hue-rotate-element aplica el efecto de rotación de matiz al elemento que tiene como objetivo.
- hue-rotate(90deg) especifica una rotación de 90 grados en la rueda de colores. Esto significa que los colores del elemento se desplazarán 90 grados, resultando en un cambio de matiz.
Puedes ajustar el valor del ángulo (en grados) para controlar la cantidad y dirección de la rotación de matiz. Los valores positivos rotan los colores en sentido horario, mientras que los valores negativos los rotan en sentido antihorario.
Aquí tienes otro ejemplo con rotación de matiz parcial:
.hue-rotate-element-2 {
filter: hue-rotate(-45deg);
}
En este caso, la clase .hue-rotate-element-2 aplica un efecto de rotación de matiz con un ángulo de -45 grados, resultando en un desplazamiento antihorario de los colores.
El efecto de rotación de matiz es una forma creativa de manipular y animar colores en tu página web, añadiendo interés visual y variedad a tus diseños.