How can I rotate a css cursor - css

Question

Here is what you need to do in order to have a clear view of what I want
Go on this editor
create a shape
select it
rotate it
place your mouse on one of the resize control point then click
you'll see the cursor rotated with the angle of the shape.
I can't find any CSS properties to achieve this kind of thing, how could this be done?

Answer 1

You can't and it doesn't. It just displays the different resize icons. See for example: http://css-cursor.techstream.org/

Answer 2

I needed a rotating arrow cursor for a carousel. Here's what I came up with:
https://codepen.io/addison912/pen/MWwmpoz
Start by hiding the default cursor in css:
body * {
cursor: none;
}
add the image of the cursor you'd like to use to html:
<div id="cursor">
<img alt="Cursor Arrow" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Arrow-down.svg"/>
</div>
This image needs to track cursor position:
let currentCursorPos;
let cursorEl = document.querySelector("#cursor");
window.addEventListener("mousemove", event => {
currentCursorPos = { x: event.clientX, y: event.clientY };
cursorEl.style.transform = `translate(${currentCursorPos.x}px, ${currentCursorPos.y}px)`;
})
Now you can rotate the #cursor img as needed.

Answer 3

Yes, in modern browsers (Chrome, Firefox, Safari) you can use an SVG encoded as a data URI as the CSS cursor:
cursor: url("data:image/svg+xml, ... ") 16 16, auto;
Encoding the SVG can be tricky, but is well documented here:
https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
The trick is then modifying the encoded SVG's transform property on the fly:
<svg viewBox="32 32"><g transform="rotate(45, 16, 16)">...</g></svg>
For instance, in the above example you'd swap out 45 for your desired angle.