使用CSS旋转鼠标光标图标

Question

使用CSS旋转鼠标光标图标

cssrotationresizemouse-cursor

4

我有一个可以调整大小和旋转的对象。

该对象可以使用8个不同的'handles'进行调整大小：s、se、ne、n、nw、w、se，我已经使用内置光标将光标设置在handles上：s_resize、n_resize等。

问题是，当对象被旋转时，调整大小的光标不能反映出调整大小的handles的方向。

我需要做的是以某种方式通过对象的角度旋转光标。

是否有一种使用CSS的方法来做到这一点？

我不希望为每个角度使用自定义光标图标...

- Yonatan Naor

1

我最终使用了一个双箭头光标。然后，我使用了45个旋转1度的版本。虽然不是最优解，但这是我能找到的最好的选择。 - Yonatan Naor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tomsullivan1989 · Accepted Answer

还有标准光标用于东北、西北、东南和西南方向：

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)

请参见http://www.htmlgoodies.com/beyond/css/article.php/3470321。

如果这些不够好，恐怕您可能需要使用自定义图像作为图标，例如：

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