CSS Mouse Cursors...rotate cursors?

Question

I have a function that rotates an object using the canvas element. When I click on this object I create a handler box around it just like photoshop does. I have eight points on the handler box. When I hover over any of these points I would like to change the mouse cursor to the relevant mouse cursor using css. I have not seen a rotate mouse icon for css.

Would I have to create my own or can I use an OS native cursor?

Answer 1

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

As specified by the w3c documentation.

If you want to use a different type of cursor, you will have to use the uri option as a cursor parameter:

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