Rotate a mouse cursor icon using CSS

Question

I have an object that can be resized and rotated.

The object can be resized with 8 different 'handles': s,se,ne,n,nw,w,se I have set the cursor on the handles with the built in cursors: s_resize, n_resize etc.

The problem is that when the object is rotated the resize cursor does not reflect the direction of the resize handle.

What I need to do is somehow rotate the cursor by the object's angle.

Is there some method using CSS to do this?

I'd hate to use custom cursor icons for each angle...

Answer 1

There are also standard cursors for northeast, northwest, southeast and southwest:

cursor: ne-resize (an arrow pointing northeast)
cursor: nw-resize (an arrow pointing northwest)
cursor: se-resize (an arrow pointing southeast)
cursor: sw-resize (an arrow pointing southwest)

See http://www.htmlgoodies.com/beyond/css/article.php/3470321.

If these are good enough I'm afraid you will probably have to use custom images as icon, e.g:

.custom {
   cursor: url(images/my-cursor.png), auto;
}