translate vs transform-origin css3

时间:2011-12-25 02:31:35

标签: css css3 transform

我想知道是否有人可以帮助我。我一直无法理解css3属性究竟是什么:transform-origin。我似乎无法按照它正在移动的方向。

例如,假设您有一个方形div,并将其旋转40度。然后你执行transform-origin: 100% 0%。你不能只做translateX(and some value)吗?看起来translateX会在执行旋转后相对于新旋转的轴沿x轴移动它。我似乎无法跟随变换原点正在做什么,或者它究竟是什么。

非常感谢一个清晰而彻底的例子。 =)

1 个答案:

答案 0 :(得分:29)

transform-origin更改元素变换的点,而不是移动整个元素(如翻译所示)。默认值为transform-origin: 50% 50%;

以下是插图:http://jsfiddle.net/joshnh/73g7t/