css/javascript 旋转但不是从中心旋转答案

【问题标题】：css/javascript rotation but not from centrecss/javascript 旋转但不是从中心旋转
【发布时间】：2012-08-19 09:59:08
【问题描述】：

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

鼠标悬停时方块会旋转 90 度，然后鼠标移开时会旋转回来。我可以扩大悬停区域以避免方块颤动（不断重复）。

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

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

到这里：

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

非常感谢

【问题讨论】：

【解决方案1】：

你可以使用transform-origin:

transform-origin: 0 0;

【讨论】：