CODEWITHSUNDEEP
cssrotationresizemouse-cursor
Yonatan Naor
Yonatan Naor

Reputation: 1547

Rotate a mouse cursor icon using CSS

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...

Upvotes: 4

Views: 4142

Answers (1)

tomsullivan1989
tomsullivan1989

Reputation: 2780

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;
}

Upvotes: 2

Related Questions