就二维变换而言，`transform-origin` 是否仅适用于 `rotate`？

Question

我对transform-origin财产的想法有点困惑，主要是它的用途。是否transform-origin仅适用rotate于 2D 变换？

Answer 1

transform-origin适用于线性变换。为简单起见，transform-origin适用于所有变换，唯一的例外是平移，这是一种仿射变换。

可以使用如下矩阵编写任何类型的转换：

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

在哪里

A B C D

是<number>s 描述线性变换。

发送

是<number>s 描述要应用的翻译。^参考

如果 b,c 与 0 不同或 a,d 与 1 不同，transform-origin则将对您的转换产生影响。如果 b、c 等于 0 且 a、d 等于 1，则将transform-origin无效。

只有translate()或身份转换（skew(0)、scale(1)、rotate(0) 等）会给你 0 in c,b 和 1 in a,d

从规范：

如果我们在红色部分有标识，那么它很可能是翻译或什么都没有（如果e和f是 0）。

举例说明使用翻译的情况：

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

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

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

变换矩阵是根据变换和变换原点属性计算的，如下所示：

1. 从单位矩阵开始。

2. 通过transform-origin的计算X和Y进行平移

3. 从左到右乘以变换属性中的每个变换函数

4. 通过转换原点的否定计算 X 和 Y 值进行转换

很明显，(2) 和 (4) 是相反的动作，为了使彼此禁用，我们需要在 (3) 中不进行转换或进行简单的转换。