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.
So for us who are just starting out in the art of CSS, being able to mix css + js is amazing. I loved the cursor trick, I will test here. Thank you
Been using this effect on my site for yeeeears man :)
As a proof-of-concept this is pretty clever but I must admit, it makes me incredibly uncomfortable to see the pointer behave in such a manner. It doesn’t really follow with the actual behavior, but my immediate reaction is that the pointer is being repelled by the button, like some sort of prank.
And in that vein (a joke / prank) I think this modification would probably be rather fun to explore. I’m struggling to come up with a more practical scenario for this type of cursor behavior though.
Gotta say, I always find custom cursors implemented like this to be particularly janky, especially with a high sensitivity mouse. There is a lot more perceived latency due to the nature of the implementation.
I do think that cta is pretty funny though, made me chuckle.
It’s a nice effect, not as disorientating as expected.
This is a clever trick :) The only drawback is that the fake cursor moves a bit behind the real one creating an awkward movement. It’s fairly noticeable and disturbing on my computer.
For that reason, this solution might be a nice eye candy, but I wouldn’t recommend using it too much.
This though got me thinking.
You wrote that static cursors can’t be rotated. But you can dynamically change them, so if you were to pre-render the cursor rotated at different angles, and you pre-load these images (to prevent blinking) you might reach the same effect while still relying on the native hardware accelerated cursor. And depending on your needs you might not even need to prerender rotation at every degree, only every 10th.
I can’t make a demo now, but I think this could work.