CSS3 转换：多重起源？

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);
}

这将完全按照我想要的方式进行：以左上角的原点进行缩放，然后以原点在中心。瞧！

Answer 2

相反，请将原点 (0,0) 的缩放视为以原点中心进行缩放+平移。单独来看： 与以下

-webkit-transform-origin: top left;
-webkit-transform: scale(1.5);

相同：

-webkit-transform-origin: center;
-webkit-transform: scale(1.5) translate3d(16.66%, 16.66%, 0);

理论上，旋转原点中心应使角突出 sqrt(1/2)-0.5 ，要求我们将原点向下和向右移动 >20.71%，但由于某种原因，webkit 变换算法为我们向下移动了一些东西（但还不够），并为我们缩放了原点（同样不完全）。因此，我们需要向右移动 50% 并针对这种奇怪的行为进行一些调整：

-webkit-transform-origin: center;
-webkit-transform: scale(1.5) rotate(45deg) translate3d(52.5%, 0.5%, 0);
-webkit-transition: all 2s ease-in;

注意：我最初的答案是使用 div 和 width:100px;< /code> 和 height100px; 需要 translate3d(54px, 0, 0)。

Answer 3

那怎么样：http://jsfiddle.net/22Byh/1/