css - CSS3 变换：多个来源？

Question

是否可以在左上角（0%，0%）指定原点进行缩放，并在 CSS3 中指定不同的原点（中心）进行旋转？如果有帮助，我只使用 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;

注意：我最初的答案是使用divwithwidth:100px;并且height100px;需要translate3d(54px, 0, 0).

Answer 3

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