css - 在二维变换方面， `transform-origin` 是否仅适用于 `rotate`？

Question

我对 transform-origin 的想法有点困惑属性，主要是它的用途。是否transform-origin仅适用于rotate在二维变换方面？

Answer 1

transform-origin适用于线性变换。为方便起见，transform-origin适用于所有变换，唯一的异常(exception)是平移，这是一种仿射变换。
可以使用如下矩阵编写任何类型的转换:

matrix(a, b, c, d, tx, ty) 

在哪里

a b c d

Are <number>s describing the linear transformation.

tx ty

Are <number>s describing the translation to apply. ^ref

如果 b,c 不等于 0 或 a,d 不等于 1，则 transform-origin会影响你的转型。如果 b,c 等于 0，a,d 等于 1，则 transform-origin不会有任何影响。
只有 translate()或身份转换(skew(0)、scale(1)、rotate(0) 等)将在 c,b 中为您提供 0，在 a,d 中为您提供 1
来自 the specification :

如果我们在红色部分有标识，那么它很可能是翻译或什么都没有(如果 e 和 f 是 0)。
举例说明使用翻译的情况:

.box {
  width:100px;
  height:100px;
  display:inline-block;
  margin:10px;
  background:red;
  transform:translate(10px,50px);
}

<div class="box" style="transform-origin:0 0"></div>
<div class="box" style="transform-origin:100% 0"></div>
<div class="box" style="transform-origin:50px 10px"></div>
<div class="box" style="transform-origin:9999px -9999px"></div>

有关更多详细信息，您可以点击此链接: https://drafts.csswg.org/css-transforms/#transform-rendering您可以在这里找到有关如何完成转换以及如何完成的完整说明 transform-origin被申请;被应用

The transformation matrix is computed from the transform and transform-origin properties as follows:

1. Start with the identity matrix.

2. Translate by the computed X and Y of transform-origin

3. Multiply by each of the transform functions in transform property from left to right

4. Translate by the negated computed X and Y values of transform-origin

很明显，(2)和(4)是相反的 Action ，为了使彼此禁用，我们需要在(3)中没有转换或简单的翻译。