Jquery css/javascript旋转，但不从中心旋转

我希望使用css或javascript创建悬停旋转效果，但我不希望像通常那样从中心旋转，而是希望从正方形的左上角旋转

正方形将在悬停时旋转90度，然后在鼠标悬停时返回。我是否可以扩大悬停区域以避免方形摆动（不断重复）

我将尝试用糟糕的图表来展示我的思维过程，十字是旋转点

_________
|       |
|   +   |
|       |
---------

为此：

+--------         
|       |   
|       |   
|       |   
---------   

---

非常感谢

您可以使用

变换原点

：

transform-origin: 0 0;

---

还有一个演示：

您可以使用

变换原点

：

transform-origin: 0 0;

---

还有一个演示：

是否可以扩大悬停功能的区域，如果我将演示设置为悬停时旋转，鼠标需要在某个位置以避免重复。正方形只需要在悬停时旋转90度并向后移动添加一个bug父元素并使用

.parent:hover.child

来影响子元素。是否可以扩大悬停函数的区域，如果我将演示设置为悬停时旋转，鼠标需要位于某个位置以避免重复。正方形只需在悬停时旋转90度并向后移动添加bug父元素并使用

.parent:hover.child

影响子元素。