翻译与转换原点 css3

【问题标题】：translate vs transform-origin css3翻译与转换原点 css3
【发布时间】：2012-01-27 12:21:37
【问题描述】：

我想知道是否有人可以帮助我。我一直无法理解 css3 属性到底是什么：transform-origin。我似乎跟不上它前进的方向。

例如，假设您有一个方形 div，然后将其旋转 40 度。然后你执行transform-origin: 100% 0%。你不能做一个translateX(and some value)吗？似乎 translateX 将在执行旋转后相对于新旋转的轴沿 x 轴移动它。我似乎无法理解 transform-origin 正在做什么，或者它到底是什么。

非常感谢您提供清晰而详尽的示例。 =)

【问题讨论】：

这里有一些例子：medium.com/hexacta-engineering/…

标签： css transform

【解决方案1】：

transform-origin 改变元素变换的点，而不是移动整个元素（就像 translate 那样）。默认值为transform-origin: 50% 50%;。

这是一个插图：http://jsfiddle.net/joshnh/73g7t/

【讨论】：

@lack ：在“.wrapper div”定义中包含过渡值，这些值适用于所有框（蓝色、红色和绿色）。但是“.wrapper div”中的变换旋转不适用于其他框。对于其他框，变换旋转在“wrapper .translate”和“.wrapper .transform-origin”中分别提及。这是为什么呢？
@joshnh ：这是指 Lack 提供的小提琴。在“.wrapper div”定义中包含转换值，这些值适用于所有框（蓝色、红色和绿色）。但是“.wrapper div”中的变换旋转不适用于其他框。对于其他框，变换旋转在“wrapper .translate”和“.wrapper .transform-origin”中分别提及。这是为什么呢？
@Ashwin 由于值已更改，因此必须单独声明。