CODEWITHSUNDEEP
csssvgtransform
JSmith
JSmith

Reputation: 4810

How can I rotate a css cursor

Here is what you need to do in order to have a clear view of what I want

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?

Upvotes: 4

Views: 11746

Answers (3)

Addison
Addison

Reputation: 51

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.

Upvotes: 5

Micah Engle-Eshleman
Micah Engle-Eshleman

Reputation: 399

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.

Upvotes: 5

Wim Mertens
Wim Mertens

Reputation: 1790

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

Upvotes: 3

Related Questions