Rotating Mouse Cursors with CSS

Check out my solution at https://codepen.io/addison912/pen/MWwmpoz to customize the cursor on your website. First, hide the default cursor using CSS. Then, add the desired cursor image to your HTML code and ensure it tracks the cursor position. Finally, rotate the image to fit your needs. If you prefer a different type of cursor, you can use the URI option as a cursor parameter.

Question:

My canvas element has a function that rotates objects. Upon clicking an object, a handler box (
handler box
) appears around it, similar to photoshop. The handler box has eight points, and I want the mouse cursor to change to the relevant css cursor when hovering over these points (
mouse cursor
). However, I have not come across a rotate mouse icon in css.

Do I need to make my own cursor or is it possible to utilize a cursor that is native to the operating system?


Solution:

The valid native cursors are


auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress

According to the documentation provided by w3c.

In case you wish to employ an alternative cursor format, the uri option should be utilized as a
cursor parameter
.

cursor: url(example.svg#linkcursor), url(hyper.cur), pointer

Frequently Asked Questions

Posted in Css