August 28th, 2019
Kinda! There is no simple or standard way to do it, but it’s possible. You can change the cursor to different built-in native versions with CSS with the cursor property, but that doesn’t help much here. You can also use that property to set a static image as the cursor. But again that doesn’t help much because you can’t rotate it once it’s there.
The trick is to totally hide the cursor with cursor: none; and replace it with your own element.
Here’s an example of that:
See the Pen Move fake mouse with JavaScript by Chris Coyier (@chriscoyier) on CodePen.
That’s not rotating yet. But now that the cursor is just some element on the page, CSS’s transform: rotate(); is fully capable of that job. Some math is required.
I’ll leave that to Aaron Iker’s really fun demo:
See the Pen Mouse cursor pointing to cta by Aaron Iker (@aaroniker) on CodePen.
Is this an accessibility problem? Something about it makes me think it might be. It’s a little extra motion where you aren’t expecting it and perhaps a little disorienting when an element you might rely on for a form of stability starts moving on you. It’s really only something you’d do for limited-use novelty and while respecting the prefers-reduced-motion. You could also keep the original cursor and do something under it, as Jackson Callaway has done here.