¿Puedes rotar el cursor en CSS? | Programar Plus

¡Un poco! No existe una forma simple o estándar de hacerlo, pero es posible. Puede cambiar el cursor a diferentes versiones nativas integradas con CSS con el cursor propiedad, pero eso no ayuda mucho aquí. También puede usar esa propiedad para establecer una imagen estática como cursor. Pero nuevamente, eso no ayuda mucho porque no se puede rotar una vez que está allí.

El truco consiste en ocultar totalmente el cursor con cursor: none; y reemplácelo con su propio elemento.

Aquí tienes un ejemplo de eso:

Ver la pluma
Mueva el mouse falso con JavaScript por Chris Coyier (@chriscoyier)
en CodePen.

Eso no está rotando todavía. Pero ahora que el cursor es solo un elemento en la página, CSS transform: rotate(); es completamente capaz de ese trabajo. Se requieren algunas matemáticas.

Dejaré eso para la demostración realmente divertida de Aaron Iker:

Ver la pluma
Cursor del mouse apuntando a cta por Aaron Iker (@aaroniker)
en CodePen.

¿Es este un problema de accesibilidad? Algo en eso me hace pensar que podría serlo. Es un pequeño movimiento adicional donde no lo esperas y quizás un poco desorientador cuando un elemento en el que podrías confiar para una forma de estabilidad comienza a moverse sobre ti. Es realmente solo algo que haría por una novedad de uso limitado y respetando el prefers-reduced-motion. También puede mantener el cursor original y hacer algo debajo de él, como lo ha hecho Jackson Callaway aquí.

(Visited 15 times, 1 visits today)