CSS3 变换：多个起点？

Question

在CSS3中，是否可以在缩放时指定以左上角（0％，0％）为原点，而在旋转时指定以不同的原点（中心点）为原点？如果只使用Webkit，是否有帮助？

我目前正在使用一个变换列表（即-webkit-transform: scale(newScale) rotate(newRotate)），但似乎无法在每次传递之间更改原点。有没有更好的方法来解决这个问题？如果我将对象缩放并以默认中心进行旋转，则元素的位置现在已经偏离了，因此当您拖动该元素时，光标仍然位于元素的左上角，而不是中心。将原点更改为中心以进行缩放可以解决此问题，但会对旋转和翻转产生新问题。

- David

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

这将完全按照我的要求进行缩放：以左上角为原点，然后以中心为原点旋转。大功告成！

- David

---

+1 表示解决方案有效，-1 表示标记不必要。这似乎是 Webkit 设计这些规则时的问题。 - Jesse Hattabaugh

你的评论没有帮助到任何人，arkanciscan。它只回答了当前实施的问题。你有其他建议可以提供吗？ - David Bradbury

请注意：如果父元素具有“scale”属性，则子元素的“transform-origin”位置仍基于原始大小（即缩放之前的大小）。 - Duannx

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;

注意：我的原始答案使用了一个带有width:100px;和height100px;的div，需要一个translate3d(54px, 0, 0)。

- Brett Pontarelli

---

Brett，我熟悉平移原点、缩放，然后再平移回来的翻译方法，但这个新的对我来说很陌生。最后进行平移是怎么工作的？54px是该资产宽度的一半吗？抱歉，我在尝试理解这个问题... - David

注意当以原点（0,0）为中心进行缩放时，对象的中心也会随之移动。因此，这与同时以原点（50％，50％）为中心进行缩放和平移对象是相同的。 - Brett Pontarelli

Answer 3

这是怎么样的呢: http://jsfiddle.net/22Byh/1/

- dfsq

---

这是一个非常好的想法，但它似乎只运行了最后两个变换中的一个。如果你把标量提高到2.0+，这样你就可以真正看到它，你会注意到它似乎没有缩放。如果你改变顺序，让缩放在第二步完成，它似乎就不会旋转了。我有什么遗漏吗？ - David

有点晚的评论：在 CSS 中，规则总是立即被覆盖，特别是在同一选择器中（唯一的“瞬态”行为是与动画相关的，即使如此，它们也需要不同的选择器）。这是 CSS 的基本行为，所以我看不到会有任何改变。实际上，最接近这种行为的是重复规则值，比如 transform: matrix(a) matrix(b) .. - 不幸的是，它与还支持重复值的其他规则行为独立。 - Christian