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

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

Answer 3

相反，将原点（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;和height100px;，需要translate3d(54px, 0, 0)。

CSS3转型：多个起源？

3 个答案: