CSS3 转换 : Multiple Origins?

Question

是否可以在 CSS3 中指定左上角 (0%, 0%) 的原点用于缩放，并指定不同的原点(中心)用于旋转？如果有帮助，我只使用 webkit。

我目前正在使用转换列表(即 -webkit-transform: scale(newScale) rotate(newRotate)

但似乎无法更改中间路径的原点。有没有更好的方法来看待这个？目前，如果我缩放一个对象并以默认中心为原点旋转它，元素的位置现在是关闭的，所以当你拖动元素时，光标仍然在元素的左上角，而它应该是在中心。将原点更改为中心以进行缩放可以解决此问题，但会带来旋转和翻转方面的新问题。

Answer 1

通过如下创建父/子关系找到了解决问题的好方法:

<div class="container">
   <img src="" />
</div>

我现在可以设置两个类如下:

.container {
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scale(0.5);
}

.container img {
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(45deg);
}

这将完全按照我的要求进行:以左上角为原点进行缩放，然后以原点为中心进行旋转。瞧!