“transform-origin” 属性只适用于 2D 变换中的 “rotate” 吗？

Question

我对 transform-origin 属性的概念有些困惑，主要是它的用途。是否只在 2D 变换中的 rotate 中应用 transform-origin 属性呢？

- piny

---

你是否在寻找这个？transform-origin适用于2D和3D。https://www.w3schools.com/cssref/css3_pr_transform-origin.asp - mhhabib

它也适用于 skew 和 scale。请参阅文档中的示例。 - Sebastian Simon

@MHHabib的“在2D变换方面”的意思是OP只询问2D变换。 - Sebastian Simon

Answer 1

transform-origin适用于线性转换。简单来说，transform-origin适用于所有类型的变换，唯一的例外是平移变换，它是一个仿射变换。

任何类型的变换都可以使用类似下面的矩阵来表示：

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

其中

a b c d

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

tx ty

是描述要应用的平移的<number>。^ref

如果b、c与0不同或a、d与1不同，则transform-origin将影响您的转换。 如果b、c等于0且a、d等于1，则transform-origin将没有影响。

只有translate()或恒等变换（倾斜（0），缩放（1），旋转（0）等）会在c、b中给出0，在a、d中给出1。

从规范中可以看到：

如果红色部分是恒等变换，则很可能是平移或什么也不是（如果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的完整解释。

转换矩阵是通过以下方式从transform和transform-origin属性计算的： 1. 从单位矩阵开始。 2. 按transform-origin计算X和Y进行平移。 3. 从左到右对transform属性中的每个变换函数进行乘法运算。 4. 根据transform-origin的计算出的X和Y值的负数进行平移。

很明显，（2）和（4）是相反的操作，为了禁用它们中的任何一个，我们需要在（3）中没有变换或进行简单的平移。

- Temani Afif