CSS3 变换使用鼠标位置旋转 - 第二阶段答案

【问题标题】：CSS3 transform rotate using mouse position - second phaseCSS3 变换使用鼠标位置旋转 - 第二阶段
【发布时间】：2013-07-24 19:56:51
【问题描述】：

我收到了这个完美的答案：

但是，我仍然需要另一个调整，相同的解决方案，但在不同的原点上旋转，例如 transform-origin: left bottom。

应该修改什么？

谢谢！

【问题讨论】：

你可以使用： 1) transform-origin: left bottom; (2) transform-origin:center 中心； 3) 变换原点：右下角；

【解决方案1】：

这可能对你有帮助：

语法：

transform-origin: x-axis y-axis z-axis;

x 轴位置： 定义视图在 x 轴上的放置位置。可能的值：

left
center
right
length
%

y 轴位置： 定义视图在 y 轴上的放置位置。可能的值：

left
center
right
length
%

z 轴位置： 定义视图在 z 轴上的放置位置。可能的值：

length

例子：

transform: rotate(45deg);
transform-origin:20% 40%;

【讨论】：